如何利用 Vue 3 的 `toRef` 和 `toRefs` 优化 `Composition API` 中的响应式解构，避免响应性丢失？

大家好，我是今天的主讲人。咱们今天来聊聊 Vue 3 Composition API 里 toRef 和 toRefs 这俩兄弟，看看它们怎么帮咱们解决响应式解构时遇到的那些“小麻烦”。

开场白：响应式解构，甜蜜的负担？

Composition API 让咱们的代码组织更清晰了，也能更好地复用逻辑。但是，用得溜之前，必须得先过一个坎儿，那就是响应式解构。

想象一下，你从一个响应式对象里解构出几个属性，直接拿来用。乍一看没啥问题，但等到源对象里的值变了，你会发现你解构出来的那些变量，纹丝不动，就像和你闹别扭一样，死活不跟着变。 这就是响应性丢失！

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="updatePerson">Update</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const person = reactive({
  name: '张三',
  age: 30
});

// 直接解构，响应性丢失！
const { name, age } = person;

const updatePerson = () => {
  person.name = '李四';
  person.age = 35;
};
</script>

在这个例子里， name 和 age 变量在初始化的时候确实是 张三 和 30，但是点击 Update 按钮后，person 对象里的值虽然变了，但是页面上显示的 name 和 age 还是 张三 和 30。 这就是响应性丢失的典型表现。

救星登场：toRef 和 toRefs

这时候，咱们的救星 toRef 和 toRefs 就要闪亮登场了。 这两个函数的作用，说白了，就是把一个响应式对象的属性变成一个 ref 对象，这样，即使你解构了这个 ref 对象，也能保持响应性。

1. toRef： 单刀赴会，点对点解决响应性

toRef 就像一个精准的狙击手，专门用来解决单个属性的响应性问题。 它的用法很简单：

const nameRef = toRef(person, 'name');

这样，nameRef 就是一个 ref 对象，它的值会始终和 person.name 保持同步。 你可以像使用普通的 ref 对象一样使用它，比如用 .value 来访问它的值。

修改上面的例子，用 toRef 来保持 name 的响应性：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="updatePerson">Update</button>
  </div>
</template>

<script setup>
import { reactive, toRef } from 'vue';

const person = reactive({
  name: '张三',
  age: 30
});

// 使用 toRef 保持 name 的响应性
const name = toRef(person, 'name');
const age = person.age; // age 还是直接访问，没有响应性

const updatePerson = () => {
  person.name = '李四';
  person.age = 35;
};
</script>

现在，点击 Update 按钮后，页面上的 Name 会变成 李四，因为 name 变量现在是一个 ref 对象，它的值和 person.name 保持同步。 但是，age 依然没有响应性，因为我们没有用 toRef 处理它。

2. toRefs： 批量解决，一劳永逸

如果有很多属性都需要保持响应性，一个一个用 toRef 效率就太低了。 这时候，toRefs 就能派上大用场了。 toRefs 可以把一个响应式对象的所有属性都转换成 ref 对象，然后你就可以随意解构，不用担心响应性丢失了。

用法也很简单：

const personRefs = toRefs(person);

现在，personRefs 就像一个包含了所有 ref 对象的容器，你可以从中解构出你需要的属性。

再来修改上面的例子，用 toRefs 同时保持 name 和 age 的响应性：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="updatePerson">Update</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

const person = reactive({
  name: '张三',
  age: 30
});

// 使用 toRefs 保持所有属性的响应性
const { name, age } = toRefs(person);

const updatePerson = () => {
  person.name = '李四';
  person.age = 35;
};
</script>

现在，点击 Update 按钮后，页面上的 Name 和 Age 都会变成 李四 和 35，因为 name 和 age 现在都是 ref 对象，它们的值和 person.name 和 person.age 保持同步。

toRef 和 toRefs 的区别与选择

为了更清晰地理解，我们用一个表格来总结一下 toRef 和 toRefs 的区别：

特性	toRef	toRefs
适用场景	只需要保持单个属性的响应性时	需要保持多个属性的响应性时
返回值	一个 ref 对象	一个包含所有属性的 ref 对象的普通对象
使用方式	toRef(响应式对象, '属性名')	toRefs(响应式对象)
性能考量	适用于只需要少量响应式属性的场景	适用于需要大量响应式属性的场景，避免多次调用 toRef
灵活性	可以动态地选择需要转换的属性	一次性转换所有属性

选择建议：

• 明确需求： 首先要明确你需要保持哪些属性的响应性。
• 数量考量： 如果只有少量属性需要响应式，toRef 更灵活。 如果需要多个属性，toRefs 更方便。
• 性能考量： 如果只需要少量属性，重复调用 toRef 的性能开销可以忽略不计。 如果需要大量属性，toRefs 可以避免多次函数调用的开销。

进阶用法：与 computed 结合，更上一层楼

toRef 和 toRefs 还可以和 computed 结合，实现更复杂的响应式逻辑。 比如，你可以用 computed 来计算一个依赖于多个响应式属性的值，然后用 toRef 或者 toRefs 来保持这个计算值的响应性。

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <button @click="updatePerson">Update</button>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed } from 'vue';

const person = reactive({
  firstName: '张',
  lastName: '三'
});

const { firstName, lastName } = toRefs(person);

// 使用 computed 计算 fullName
const fullName = computed(() => firstName.value + lastName.value);

const updatePerson = () => {
  person.firstName = '李';
  person.lastName = '四';
};
</script>

在这个例子里，fullName 是一个计算属性，它的值依赖于 firstName 和 lastName。 由于 firstName 和 lastName 都是 ref 对象，所以当 person.firstName 或者 person.lastName 改变时，fullName 也会自动更新。

一个更复杂的例子：处理嵌套对象

如果你的响应式对象里包含嵌套对象， toRef 和 toRefs 也能派上用场。 但是需要注意，toRefs 只能处理第一层级的属性，对于嵌套对象，你需要单独处理。

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.address.city }}</p>
    <button @click="updatePerson">Update</button>
  </div>
</template>

<script setup>
import { reactive, toRef, toRefs } from 'vue';

const person = reactive({
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    street: '长安街'
  }
});

// toRefs 只能处理第一层级的属性
const { name, age } = toRefs(person);

// 单独处理嵌套对象
const city = toRef(person.address, 'city');

const updatePerson = () => {
  person.name = '李四';
  person.address.city = '上海';
};
</script>

在这个例子里，name 和 age 可以用 toRefs 直接处理，但是 city 需要单独用 toRef 处理，因为 address 是一个嵌套对象。

注意事项

• toRef 和 toRefs 只能用于响应式对象（通过 reactive 或者 ref 创建的对象）。
• toRefs 返回的是一个普通对象，不是响应式对象。
• 使用 toRef 或者 toRefs 之后，解构出来的变量都是 ref 对象，需要用 .value 来访问它们的值。

总结：响应式解构，不再是拦路虎

通过 toRef 和 toRefs，咱们可以轻松解决 Vue 3 Composition API 中响应式解构的问题，让数据绑定更加灵活和可控。 记住，选择合适的工具，才能事半功倍！ 希望今天的讲解能帮助大家更好地理解和使用这两个函数，写出更健壮、更易维护的 Vue 应用。

感谢大家的聆听！ 祝大家编码愉快！