在 Vue 3 中，toRef 和 toRefs 是两个用于将 reactive 对象的属性转为独立 ref 的工具。它们通常用于组合式 API 中，帮助我们灵活地管理和使用响应式数据。以下是它们的用法、区别以及典型使用场景。
1. toRef
用法
toRef 用于将 reactive 对象的单个属性转为独立的 ref，保持属性的响应性和双向绑定。
语法
import { reactive, toRef } from 'vue';
const state = reactive({
name: 'Alice',
age: 25
});
// 将 reactive 对象 state 的 name 属性转为 ref
const nameRef = toRef(state, 'name');
使用场景
- 单属性绑定 ：如果只需要将响应式对象的某个属性传递给子组件或其他方法中，同时希望保持响应性，可以使用
toRef。 - 减少不必要的深拷贝 ：如果将整个
reactive对象传递可能会导致深拷贝，而toRef可以帮助我们保持原属性的响应性。
示例
假设我们有一个对象 state，包含用户的姓名和年龄属性，但我们只想传递 name 给另一个函数或子组件，同时希望 name 保持响应式：
const state = reactive({ name: 'Alice', age: 25 });
const nameRef = toRef(state, 'name');
// nameRef 的修改会影响到 state 的 name 属性
nameRef.value = 'Bob';
console.log(state.name); // 输出 'Bob'
2. toRefs
用法
toRefs 可以将整个 reactive 对象的每个属性都转为独立的 ref，这些 ref 仍然保持对象属性之间的响应性。
语法
import { reactive, toRefs } from 'vue';
const state = reactive({
name: 'Alice',
age: 25
});
// 将 state 的所有属性转换为 ref
const stateRefs = toRefs(state);
使用场景
- 解构响应式对象时保持响应性 ：如果需要解构
reactive对象中的多个属性到本地作用域，直接解构会丢失响应性，而使用toRefs可以保持响应式。 - 传递多个属性到子组件 ：当多个属性需要传递到子组件时，通过
toRefs可以分别传递各个属性的ref，使子组件能独立监听和更新各个属性。
示例
假设我们想解构一个包含 name 和 age 的 reactive 对象：
const state = reactive({ name: 'Alice', age: 25 });
const { name, age } = toRefs(state);
// 修改 name 和 age 仍然会影响原始的 state
name.value = 'Bob';
console.log(state.name); // 输出 'Bob'
总结：toRef vs toRefs
| 特性 | toRef |
toRefs |
|---|---|---|
| 转换对象的属性 | 单个属性 | 所有属性 |
| 使用场景 | 将单个响应式属性作为 ref 传递或绑定 |
将多个响应式属性保持为 ref，用于解构和属性传递 |
| 响应性 | 保持属性响应性，与原 reactive 对象保持双向绑定 |
每个属性都保持独立的 ref，与原 reactive 对象双向绑定 |
注意事项
- 响应性传递 ：
toRef和toRefs不会创建新的响应式状态，它们只是将reactive对象的属性包装成ref，并不会打破原对象的响应性。 - 避免丢失响应性 ：解构
reactive对象时，直接解构会丢失响应性，因此推荐使用toRefs。
toRef 和 toRefs 是 Vue 3 中处理复杂数据和保持响应性传递的利器，在设计组合式函数和解构复杂对象时非常有用。