Vue 3 中的 toRef 和 toRefs：区别与使用场景

1. 什么是 toRef？

toRef 是一个用于将响应式对象的某个属性转换为 ref 的函数。它的主要作用是保持单个属性的响应性，即使该属性是从一个响应式对象中提取出来的。

使用场景

当你只需要从响应式对象中提取一个属性，并希望保持其响应性时，可以使用 toRef。

import { reactive, toRef } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});

// 将 state.count 转换为 ref
const countRef = toRef(state, 'count');

console.log(countRef.value); // 0

// 修改 state.count 会同步更新 countRef
state.count = 10;
console.log(countRef.value); // 10

特点

• 针对单个属性。

• 返回一个 ref 对象，其 .value 属性指向原始对象的属性值。

• 修改原始对象的属性会同步更新 ref，反之亦然。

---

2. 什么是 toRefs？

toRefs 是一个用于将整个响应式对象的所有属性转换为 ref 的函数。它会返回一个普通对象，对象的每个属性都是一个 ref。

使用场景

当你需要解构响应式对象并保持所有属性的响应性时，可以使用 toRefs。这在组合式 API 中非常常见，尤其是在从 setup 函数中返回响应式数据时。

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});

// 将整个 state 对象转换为 refs
const stateRefs = toRefs(state);

console.log(stateRefs.count.value); // 0
console.log(stateRefs.name.value); // 'Vue'

// 修改 state 的属性会同步更新 refs
state.count = 10;
console.log(stateRefs.count.value); // 10

特点

• 针对整个对象。

• 返回一个普通对象，对象的每个属性都是 ref。

• 修改原始对象的属性会同步更新对应的 ref，反之亦然。

---

3. toRef 和 toRefs 的区别

特性	toRef	toRefs
作用对象	单个属性	整个对象
返回值	单个 ref	一个普通对象，属性都是 ref
使用场景	提取单个属性并保持响应性	解构整个对象并保持所有属性的响应性
示例	const countRef = toRef(state, 'count');	const stateRefs = toRefs(state);