咳咳，各位观众老爷们，今天咱们来聊聊 Vue 3 里面两个看似简单，但实则暗藏玄机的函数：toRef 和 toRefs。 这俩兄弟，专门负责处理 reactive 对象，让咱们在解构它们的时候，还能保持响应性。 想象一下，没有它们，你解构出来的东西就像脱缰的野马，再也找不回原来的羁绊了。
好，废话不多说，咱们直接上干货！
一、 啥是 reactive？ 简单回顾一下
在 Vue 3 里面，reactive 是个宝贝，它能把一个普通的 JavaScript 对象变成响应式对象。 也就是说，只要你修改了这个对象的属性，Vue 就会自动更新视图。
import { reactive } from 'vue';
const state = reactive({
name: '张三',
age: 18
});
console.log(state.name); // 输出: 张三
state.name = '李四'; // 修改 state.name
// 视图会自动更新，显示 李四二、 toRef：单刀赴会，专攻一个属性
toRef 的作用是：把一个 reactive 对象的某个属性转换成一个 ref 对象。 这听起来有点绕，咱们拆开来说。
reactive对象： 就是用reactive包裹过的对象，具有响应性。- 属性：
reactive对象里面的一个 key-value 对。 ref对象： Vue 里面的一个特殊对象，拥有.value属性，访问和修改.value就能触发响应式更新。
简单来说，toRef 就像一个间谍，潜伏在 reactive 对象的某个属性里，一旦这个属性发生变化，它就会立刻通知 Vue，让视图更新。
toRef 的用法：
import { reactive, toRef } from 'vue';
const state = reactive({
name: '张三',
age: 18
});
const nameRef = toRef(state, 'name');
console.log(nameRef.value); // 输出: 张三
nameRef.value = '王五'; // 修改 nameRef.value
console.log(state.name); // 输出: 王五，state.name 也被修改了！toRef 源码解读（简化版）：
function toRef(target, key) {
return {
__v_isRef: true, // 标记这是一个 ref 对象
get value() {
return target[key]; // 读取属性值
},
set value(newValue) {
target[key] = newValue; // 修改属性值
}
};
}重点：
toRef返回的是一个ref对象，所以要通过.value来访问和修改属性值。- 修改
nameRef.value，会直接修改state.name，因为它们共享同一个数据源。 这就是响应性的关键！
toRef 解决了什么问题？
假设没有 toRef，我们直接把 state.name 赋值给一个变量：
const name = state.name; // name = '张三'
name = '赵六'; // 修改 name
console.log(state.name); // 输出: 张三，state.name 没变！可以看到，修改 name 变量，state.name 并没有改变，响应性丢失了！ 这是因为 name 只是一个普通的字符串变量，它和 state.name 没有任何关系。
而 toRef 返回的是一个 ref 对象，它和 state.name 之间建立了响应式的连接。 修改 ref 对象的 .value，就能触发 state.name 的更新。
三、 toRefs：组团出道，批量转换属性
toRef 只能转换单个属性，如果我们要转换多个属性，那就需要用到 toRefs 了。 toRefs 的作用是：把一个 reactive 对象的所有属性都转换成 ref 对象。
toRefs 的用法：
import { reactive, toRefs } from 'vue';
const state = reactive({
name: '张三',
age: 18
});
const stateRefs = toRefs(state);
console.log(stateRefs.name.value); // 输出: 张三
console.log(stateRefs.age.value); // 输出: 18
stateRefs.name.value = '田七';
console.log(state.name); // 输出: 田七toRefs 源码解读（简化版）：
function toRefs(target) {
const result = {};
for (const key in target) {
result[key] = toRef(target, key); // 循环调用 toRef
}
return result;
}重点：
toRefs返回的是一个对象，这个对象的每个属性都是一个ref对象。- 修改
stateRefs.name.value，会直接修改state.name。 toRefs内部循环调用了toRef，所以它本质上就是把reactive对象的每个属性都用toRef包裹了一遍。
toRefs 解决了什么问题？
在组件中使用 ...toRefs(state) 来解构 reactive 对象，可以保持响应性。
<template>
<div>
<p>姓名: {{ name }}</p>
<p>年龄: {{ age }}</p>
<button @click="updateName">修改姓名</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
name: '张三',
age: 18
});
const { name, age } = toRefs(state); // 解构 state，保持响应性
const updateName = () => {
name.value = '司马懿'; // 修改 name.value
};
return {
name,
age,
updateName
};
}
};
</script>如果没有 toRefs，直接解构 state：
const { name, age } = state; // 解构 state，丢失响应性
const updateName = () => {
name = '司马懿'; // 修改 name，视图不会更新！
};这样解构出来的 name 和 age 只是普通的变量，它们和 state 没有任何关系，修改它们不会触发视图更新。
四、 toRef vs toRefs： 异同点大PK
| 特性 | toRef |
toRefs |
|---|---|---|
| 作用 | 把 reactive 对象的单个属性转换成 ref 对象 |
把 reactive 对象的所有属性转换成 ref 对象 |
| 返回值 | ref 对象 |
一个对象，对象的每个属性都是 ref 对象 |
| 用法 | toRef(state, 'name') |
toRefs(state) |
| 适用场景 | 只需要转换单个属性时 | 需要转换多个属性时，尤其是在组件的 setup 函数中 |
| 内部实现 | 直接创建一个 ref 对象，连接到指定属性 |
循环调用 toRef，把每个属性都转换成 ref 对象 |
五、 为什么要保持响应性？
响应性是 Vue 的核心特性之一。 保持响应性，意味着：
- 数据和视图保持同步： 只要数据发生变化，视图就会自动更新。
- 开发效率更高： 不需要手动更新视图，Vue 会自动完成。
- 用户体验更好： 视图能够及时反映数据的变化，用户操作更加流畅。
六、 总结
toRef 和 toRefs 是 Vue 3 中非常重要的两个函数。 它们能够让我们在解构 reactive 对象的时候，还能保持响应性，让数据和视图始终保持同步。 理解了它们的原理和用法，你就能更好地使用 Vue 3，开发出更高效、更流畅的应用程序。
简单记忆小口诀：
toRef：单挑一个，变ref宝。toRefs：集体变身，个个ref妙。
希望今天的讲解对大家有所帮助！ 如果有什么疑问，欢迎在评论区留言。 咱们下期再见！