【vue】toRefs 和 toRef——如何在解构响应式对象时保持响应性

toRefs 和 toRef 是 Vue.js 框架中提供的 Composition API 的一部分，它们主要用于在 Vue 3 中解构响应式对象，同时保持其响应性。简单来说就是把一个响应式对象里的东西解构拿出来，并让其依然具备响应式。

这名字就很简单粗暴：

to Ref(s)——变成 响应式的

toref是把对象的某个属性变成响应式的，torefs是把对象的每个属性都变成响应式的

toRef

toRef 用于创建一个响应式的 ref 对象，其值指向另一个对象中的某个属性。这样，就可以在不丢失响应性的情况下，将这个属性单独拿出来使用。

举例说明：

假设有一个响应式对象 state，我们想创建一个 ref 对象 nameRef，它的值是 state 对象中的 name 属性：

import { reactive, toRef } from 'vue';

const state = reactive({
  name: '张三',
  age: 25
});

const nameRef = toRef(state, 'name');

// 当 state.name 改变时，nameRef.value 也会改变
state.name = '李四';
console.log(nameRef.value); // 输出 '李四'

toRefs

toRefs 用于将响应式对象转换为普通对象，其中每个属性都是指向原始对象相应属性的 ref。这样，可以解构整个对象而不丢失其响应性。

举例说明：

假设我们有一个响应式对象 state，我们想解构它的属性，但是保持其响应性：

import { reactive, toRefs } from 'vue';

const state = reactive({
  name: '张三',
  age: 25
});

// 使用 toRefs 解构 state
const { name, age } = toRefs(state);

// 现在我们可以单独使用 name 和 age，它们都是 ref 对象
console.log(name.value); // 输出 '张三'
console.log(age.value);  // 输出 25

// 改变 state 的属性，相应的 ref 也会更新
state.name = '李四';
console.log(name.value); // 输出 '李四'