ref

• 生成值类型的响应数据
• 可用于模板和 reactive
• 通过 .value 修改值

<script>
  import {ref, reactive} from 'vue';

  export default {
    name: 'ref',
    setup() {
      const ageRef = ref(20);
      const nameRef = ref('zwx');

      const state = reactive({
        name: nameRef
      });

      setTimeout(() => {
        console.log(ageRef.value)
        ageRef.value = 25;
        nameRef.value = 'pw'
      }, 1000)

      return {
        ageRef,
        state
      }
    }
  }
</script>

命名规范：nameRef 用以知道是ref类型数据
除了在模板中，都是使用 .value的 来获取的
ref还用来获取dom

<template>
  <p ref="elemRef">我是一行文字</p>
</template>

<script>
import {ref, onMounted} from 'vue';

export default {
  name: 'refDemo',

  setUp() {
    const elemRef = ref(null)
    onMounted(() => {
      console.log(elemRef.value.innerHTML);
    });

    return {
      elemRef
    }
  }
}
</script>

toRef

• 针对一个响应式对象（reactive 封装）的 prop
• 创建一个 ref，具有响应式
• 两者保持引用关系 ```vue

<a name="a3Bwk"></a>
# toRefs

- 将响应式对象（reactive封装）转换为普通对象
- 对象的每一个属性都对应的ref
- 两者保持引用关系

```vue
<template>
  <p>toRefs demo{{age}} {{name}}</p>
</template>

<script>
import {toRefs, reactive} from 'vue';

export default {
  name: 'ToRefs',
  setup() {
    const state = reactive({
      age: 20,
      name: '潘薇'
    })

    const stateAsRefs = toRefs(state); // 将响应式对象变为普通对象
    return stateAsRefs
  }
}
</script>

案例：合成函数返回响应式对象

function useFeatureX() {
  const state = reactive({
    x: 1,
    y: 2
  });

  // some code here

  // 返回时转换为ref
  return toRefs(state);
}

export default {
  steup() {
    // 可以在不失去响应式的情况下解构
    const { x, y } = useFeatureX();

    return {
      x,
      y
    }
  }
}

最佳使用方式

• 用 reactive 做对象的响应式，用 ref 做值类型响应式
• setup 中返回 toRefs(state)，或者 toRef(state, ‘xxx’) // 用reactive定义对象，用toRefs或者toRef返回，这样模板中就可以不用 state.xxx 了，而是直接xxx；
• ref 变量命名使用 xxxRef
• 合成函数返回响应式对象时，使用 toRefs