Vue 3 中，toRefs和toRef

在 Vue 3 中，toRefs和toRef是两个常用的函数，用于处理响应式对象和 ref 对象之间的相互转换。

1. toRefs 函数：

   • 用法：toRefs(object)

   • 作用：将响应式对象转换为具有相同响应式能力的 ref 对象集合。

   • 示例：

     import { reactive, toRefs } from 'vue';
     
     const state = reactive({
       name: 'Alice',
       age: 25
     });
     
     const refs = toRefs(state);
     
     console.log(refs.name.value); // 'Alice'
     console.log(refs.age.value);  // 25
     

   • 使用 toRefs 将响应式对象转换为 ref 对象集合后，可以直接使用 .value 访问每个属性的值。

2. toRef 函数：

   • 用法：toRef(object, key)

   • 作用：创建一个 ref 对象，该 ref 对象绑定到响应式对象的指定属性。

   • 示例：

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

   • 使用 toRef 创建的 ref 对象与原始属性相关联，对 ref 对象的修改会影响到响应式对象中的属性，反之亦然。

总结：

toRefs 用于将整个响应式对象转换为带有 .value 的 ref 对象集合，以方便对每个属性进行访问；toRef 则是将指定属性从响应式对象中提取出来，创建一个单独的 ref 对象，用于对该属性进行单独的绑定和访问。