Vue3 中 ref、isRef、toRef、toRefs、toRaw 的使用方法

在 Vue3 的响应式系统中，ref、isRef、toRef、toRefs、toRaw 这几个函数发挥着重要作用，理解它们的使用方法能让开发者更高效地进行开发。

ref

ref 用于创建一个响应式的数据引用。它接收一个初始值，可以是基本数据类型，也可以是对象。例如：

import { ref } from 'vue';
const count = ref(0);
const person = ref({ name: 'John', age: 30 });

在模板中使用时，无需额外操作即可显示其值；在 JavaScript 代码中，通过 .value 来访问和修改值，如 count.value++; person.value.age++;。

isRef

isRef 用于判断一个值是否为 ref 创建的引用。比如：

import { ref, isRef } from 'vue';
const num = ref(5);
const normalVar = 10;
console.log(isRef(num)); // true
console.log(isRef(normalVar)); // false

这在不确定某个值是否为 ref 时非常有用。

toRef

toRef 可以从一个响应式对象中创建一个新的 ref，这个 ref 会保持对原对象属性的响应式连接。例如：

import { ref, toRef } from 'vue';
const person = ref({ name: 'Alice', age: 25 });
const nameRef = toRef(person.value, 'name');
nameRef.value = 'Bob';
console.log(person.value.name); // 'Bob'

它常用于将对象中的某个属性单独提取出来，同时保持响应式。

toRefs

toRefs 则是将一个响应式对象的所有属性都转换为 ref。例如：

import { ref, toRefs } from 'vue';
const person = ref({ name: 'Eve', age: 35 });
const { name, age } = toRefs(person.value);
name.value = 'Grace';
console.log(person.value.name); // 'Grace'

这样可以在解构对象属性的保持属性的响应式。

toRaw

toRaw 用于获取一个由 reactive 或 ref 创建的响应式对象的原始对象。例如：

import { ref, toRaw } from 'vue';
const data = ref({ message: 'Hello' });
const rawData = toRaw(data.value);
rawData.message = 'World';
console.log(data.value.message); // 'World'

在某些需要直接操作原始对象的场景下，toRaw 就派上用场了。

ref、isRef、toRef、toRefs、toRaw 这几个函数在 Vue3 开发中各有其独特的用途，熟练掌握它们，能让我们更好地构建高效、灵活的响应式应用。