Vue Ref全家桶具体用法详解

在 Vue 中，我们经常需要访问到组件中的元素，例如获取 input 标签的值、获取 canvas 画布、操作 DOM 等，这时候 Ref 就是一个很友好的工具。Vue 3.0 进一步细化了 Ref 的分类，分别是 Ref、Reactive Ref、Shallow Ref、To Ref 四种类型，可以更加精细地控制数据是否为响应式以及其他的操作。

Ref

Ref 就是最普通的一个 Ref 类型，可以使用 ref 函数来创建。Ref 可以用于保存任何的数据类型，并且可以在组件中通过 $refs 属性来访问。

下面是一个例子，首先在组件中定义一个 Ref：

<template>
  <div>
    <p ref="myParagraph">Hello World</p>
  </div>
</template>

然后在 JavaScript 中，我们可以通过如下方式引用 Ref：

this.$refs.myParagraph

使用 Ref 的主要好处是可以访问到具体的 DOM 元素，这样可以进行元素的操作，例如获取 input 标签的值、操作 canvas 画布等。

ReactiveRef

Reactive Ref 是 Vue 3.0 新增的一个 Ref 类型，可以用于创建响应式的 Ref。使用 reactive 函数可以创建一个响应式对象，使用 ref 函数可以同时将其转化为 Ref，得到的就是 Reactive Ref。Reactive Ref 和 Ref 的用法是相同的，唯一的区别在于 Reactive Ref 的值是响应式的。

下面是一个例子，在组件中定义一个 Reactive Ref：

<template>
  <div>
    <p>{{ myText }}</p>
    <button @click="changeText">Change Text</button>
  </div>
</template>

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

export default {
  setup() {
    const data = reactive({
      text: 'Hello World',
    });

    const myText = ref(data.text);

    const changeText = () => {
      data.text = 'New Text';
    };

    return {
      myText,
      changeText,
    };
  },
};
</script>

可以看到，这里使用了 ref 函数将 data.text 转化为 Reactive Ref，这样 myText 将是一个响应式的 Ref，而 data.text 的变化也会影响 myText 的值。

ShallowRef

Shallow Ref 是另外一种 Ref 类型，可以用于创建一个浅层响应式的 Ref。这意味着，这个 Ref 只会追踪对象的第一层属性的变化，而深层嵌套的属性的变化将无法触发更新。Shallow Ref 可以使用 shallowRef 函数来创建。

下面是一个例子，在组件中定义一个 Shallow Ref：

<template>
  <div>
    <p>{{ myData }}</p>
    <button @click="changeData">Change Data</button>
  </div>
</template>

<script>
import { shallowRef } from 'vue';

export default {
  setup() {
    const data = { text: 'Hello World' };
    const myData = shallowRef(data);

    const changeData = () => {
      data.text = 'New Text';
    };

    return {
      myData,
      changeData,
    };
  },
};
</script>

可以看到，这里使用了 shallowRef 函数将 data 转化为 Shallow Ref，这样 myData 将是一个浅层响应式的 Ref，而 data.text 的变化将无法影响 myData 的值，因为 text 属性并不是 myData 的第一层属性。

ToRef

To Ref 可以用于将对象的某个属性转化为 Ref。To Ref 可以使用 toRef 函数来创建。

下面是一个例子，在组件中定义一个 To Ref：

<template>
  <div>
    <p>{{ myText }}</p>
    <button @click="changeText">Change Text</button>
  </div>
</template>

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

export default {
  setup() {
    const data = reactive({
      text: 'Hello World',
    });

    const myText = toRef(data, 'text');

    const changeText = () => {
      data.text = 'New Text';
    };

    return {
      myText,
      changeText,
    };
  },
};
</script>

可以看到，这里使用了 toRef 函数将 data.text 转化为 To Ref，这样 myText 将是一个 Ref，可以直接访问到 data.text 的值，而 data.text 的变化也会影响 myText 的值。