在 Vue 3 中，toRef 和 toRefs 是两个用于创建响应式引用的工具，主要用于组合式 API（Composition API）的场景中

1. toRef
定义
toRef 将某个对象的某个属性包装成一个响应式引用。这样可以直接对该引用进行操作，而不需要通过对象操作属性。

用法

import { reactive, toRef }from'vue';const state =reactive({
name:'亚索',
age:25,
});const nameRef =toRef(state,'name');// 将 state 的 name 属性变为单独的 ref// 修改方式
nameRef.value='索亚';// 同时会更新 state.name
console.log(state.name); // 输出：'索亚'

应用场景

1. 解耦属性
   适用于需要单独提取响应式对象中某个属性以便使用的场景。
2. 避免丢失响应性
   如果直接解构 reactive 对象中的属性，响应性会丢失；使用 toRef 则可以避免这个问题。

2. toRefs
定义
toRefs 是批量处理版本的 toRef，用于将整个 reactive 对象的属性转化为 ref。

import { reactive, toRefs }from'vue';const state =reactive({
name:'亚索',
age:25,
});const{ name, age }=toRefs(state);// 将 state 的属性分别转化为 ref// 修改方式
name.value='索亚';// 同时会更新 state.name
console.log(state.name); // 输出：'索亚'

应用场景

1. 与解构赋值配合
   在模板中使用 setup 返回的响应式对象时，通常需要解构它，toRefs 可以解决响应性丢失问题。
2. 提升代码可读性
   当需要频繁访问多个属性时，使用 toRefs 提高了访问和修改的便利性。

3. toRef 和 toRefs 的对比

toRef	toRefs
单个属性	整个对象的所有属性
单独提取某个属性为响应式引用	需要解构整个 reactive 对象时
单个 ref	包含多个 ref 的对象

4. 实际应用示例
结合表单场景

<template><div><input v-model="name" placeholder="输入姓名" /><input v-model="age" placeholder="输入年龄" type="number" /><p>姓名: {{ name }}</p><p>年龄: {{ age }}</p></div>
</template><script>
import { reactive, toRefs }from'vue';exportdefault{
setup(){
const form =reactive({
name:'',
age:null,
});// 将 form 的属性转化为 ref，便于模板中直接使用
returntoRefs(form);
},
};
</script>

结合第三方库
使用 toRef 提取局部属性，避免频繁访问完整的响应式对象：

import { reactive, toRef }from'vue';
import{ useFetch }from'vue-composition-fetch';// 示例第三方库exportdefault{
setup(){
const state =reactive({
data:null,
loading:false,
});const loadingRef =toRef(state,'loading');// 提取 loading 属性，单独传入第三方库
useFetch('https://api.example.com',{loading: loadingRef });return state;
},
};

总结：

• toRef 适合处理单个属性。
• toRefs 在解构响应式对象时非常实用，避免响应性丢失。