Vue - toRefs() 和 toRef() 的使用

一、toRefs()

在 Vue 3 中,toRefs()可以将响应式对象的属性转换为可响应的 refs。主要用于在解构响应式对象时，保持属性的响应性。

1. 导入 toRefs 函数

import { toRefs } from 'vue';

2. 将响应式对象的属性转换为 ref

const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!'
});

// toRefs() 接受一个响应式对象，并返回一个新的对象，
// 其中包含原始响应式对象的所有属性，这些属性都是 refs。
// 这使得在组件中使用时，保持这些属性的响应性。

const refs = toRefs(state);

console.log(refs.count.value); // 0
refs.count.value++; // 修改属性
console.log(refs.count.value); // 1

3. 与解构的关系

const { count, message } = toRefs(state);

// 可以使用 count 和 message，它们都是响应式的
// 转换成 ref 之后需要使用 .value

count.value++; // 正确，count 仍然是响应式的

// 若直接像下面这种直接解构，则会失去响应性

const { count, message } = state; // 这种方式会失去响应性
count++; // 这样修改不会触发视图更新

总结：

toRefs() 是 Vue 3 中用于将响应式对象的属性转换为可响应的 refs 的函数。它在处理解构赋值时非常有用，有助于保持响应性。当需要解构一个响应式对象的属性并确保它们仍然是响应式时，使用 toRefs() 是个很好的选择。

二、toRef()

在 Vue 3 中，toRef 是一个用于将响应式对象中的单个属性转换为一个响应式引用的函数。这个函数非常有用，尤其是在需要传递响应式对象的一个特定属性时。它与 toRefs 类似，但 toRef 只处理一个属性，而不是整个对象。

1. 导入 toRef 函数

import { toRef } from 'vue';

2. 将响应式对象的单个属性转换为 ref

toRef 接受两个参数：一个响应式对象和该对象的属性名。它返回一个新的 ref，这个 ref 是对原响应式对象中指定属性的响应式引用。

const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!'
});
// state 对象，和 count属性
// 只将 count 转换为 ref
const countRef = toRef(state, 'count');

3. 访问和修改引用的值

// 使用 toRef 创建的响应式引用就需要
// 通过 .value 访问和修改其值
console.log(countRef.value); // 0
countRef.value++; // 修改属性
console.log(countRef.value); // 1

总结：

toRef 是 Vue 3 中将响应式对象的单个属性转换为响应式引用的函数。它提供了一种简便的方法来访问和操作响应式对象的特定属性，同时保证了这些属性的响应性。使用 toRef 可以使组件间的数据传递变得更加灵活和响应式，非常适合在 Composition API 中使用。