vue3.x 的 toRef详细解读

在 Vue 3.x 中，toRef 是一个用于创建响应式引用的工具函数。它可以将一个响应式对象的某个属性转换为一个独立的 ref 对象，同时保持与原始属性的响应式连接。以下是 toRef 的详细解读和示例。

1. `toRef` 的作用

核心功能

toRef 用于从响应式对象（reactive 对象）中提取一个属性，并将其转换为一个 ref 对象。
这个 ref 对象会与原始属性保持同步：修改 ref 对象的值会更新原始属性，反之亦然。

使用场景

当你需要将响应式对象的某个属性单独提取出来，同时保持其响应性时。
当你需要将响应式对象的属性传递给组合式函数或组件时。

2. `toRef` 的基本用法

语法

import { reactive, toRef } from 'vue';const state = reactive({foo: 1,bar: 2,
});const fooRef = toRef(state, 'foo');

返回值

toRef 返回一个 ref 对象，该对象与原始属性保持响应式连接。

3. `toRef` 的特性

响应式连接：
- toRef 创建的 ref 对象与原始属性保持同步。
- 修改 ref 对象的值会更新原始属性，反之亦然。
非响应式属性的处理：
- 如果原始属性不存在，toRef 仍然会返回一个 ref 对象，但其值为 undefined。
- 如果后续原始对象添加了该属性，ref 对象会自动更新。
与 ref 的区别：
- ref 创建一个独立的响应式引用，而 toRef 创建一个与原始属性绑定的响应式引用。

4. 示例代码

示例 1：基本用法

import { reactive, toRef } from 'vue';const state = reactive({foo: 1,bar: 2,
});const fooRef = toRef(state, 'foo');console.log(fooRef.value); // 输出: 1fooRef.value = 10; // 修改 ref 对象
console.log(state.foo); // 输出: 10，原始属性也被更新state.foo = 20; // 修改原始属性
console.log(fooRef.value); // 输出: 20，ref 对象也被更新

解释：

fooRef 是通过 toRef 从 state 中提取的 ref 对象。
修改 fooRef.value 会更新 state.foo，反之亦然。

示例 2：与非响应式属性的交互

import { reactive, toRef } from 'vue';const state = reactive({foo: 1,
});const barRef = toRef(state, 'bar'); // bar 属性不存在console.log(barRef.value); // 输出: undefinedstate.bar = 2; // 添加 bar 属性
console.log(barRef.value); // 输出: 2，ref 对象自动更新

解释：

即使 bar 属性最初不存在，toRef 仍然会返回一个 ref 对象。
当 bar 属性被添加到 state 时，barRef 会自动更新。

示例 3：在组合式函数中使用 toRef

import { reactive, toRef } from 'vue';function useFeature(state) {const fooRef = toRef(state, 'foo');function increment() {fooRef.value++;}return {fooRef,increment,};
}const state = reactive({foo: 1,
});const { fooRef, increment } = useFeature(state);console.log(fooRef.value); // 输出: 1increment();
console.log(state.foo); // 输出: 2

解释：

在组合式函数 useFeature 中，使用 toRef 提取 state.foo 并返回。
调用 increment 函数会更新 state.foo。

5. `toRef` 与 `toRefs` 的区别

特性	`toRef`	`toRefs`
作用对象	单个属性	整个对象
返回值	单个 `ref` 对象	包含所有属性的 `ref` 对象的普通对象
使用场景	提取单个属性并保持响应式连接	解构整个对象并保持响应式连接