如何利用 Vue 3 的 `toRef` 和 `toRefs`，在 `Composition API` 中处理复杂的响应式解构，避免响应性丢失？

大家好！我是你们今天的 Vue 3 响应式解构难题终结者。今天咱们就来聊聊 toRef 和 toRefs 这哥俩，在 Composition API 里，它们可是解决响应式解构问题的关键人物。

开场白：响应式解构，甜蜜的陷阱

在Vue 3的 Composition API 中，我们经常需要从响应式对象中解构出一些属性。这看起来很方便，但一不小心就会掉进响应性丢失的陷阱。

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <button @click="updateInfo">更新信息</button>
  </div>
</template>

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

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

const { name, age } = state; // 看起来很美好，实际上…

function updateInfo() {
  state.name = '李四';
  state.age = 35;
}
</script>

上面的代码看起来没啥问题，对吧？ name 和 age 都显示在页面上。但是，当你点击 "更新信息" 按钮时，你会发现页面上的 name 和 age 并没有更新！ 这是因为你解构出来的 name 和 age 只是普通变量，它们的值在解构时就被复制了，与原始的 state 对象失去了关联，也就失去了响应性。

救星登场：toRef 和 toRefs

别慌！Vue 3 早就料到了这个问题，并提供了 toRef 和 toRefs 这两个神器来解决它。

• toRef： 让单个属性保持响应性

  toRef 可以让你为响应式对象的单个属性创建一个响应式的引用。这意味着，当你修改这个引用时，原始对象也会被修改，反之亦然。

  让我们用 toRef 来改造上面的代码：

  <template>
    <div>
      <p>姓名: {{ name }}</p>
      <p>年龄: {{ age }}</p>
      <button @click="updateInfo">更新信息</button>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRef } from 'vue';
  
  const state = reactive({
    name: '张三',
    age: 30,
  });
  
  const name = toRef(state, 'name');
  const age = toRef(state, 'age');
  
  function updateInfo() {
    state.name = '李四';
    state.age = 35;
  }
  </script>

  现在，当你点击 "更新信息" 按钮时，页面上的 name 和 age 就能正确更新了。因为 name 和 age 不再是普通的变量，而是指向 state 对象中对应属性的响应式引用。

  toRef 的语法：

  const ref = toRef(source, key);

  • source: 响应式对象 (reactive object)。
  • key: 要创建引用的属性名 (string)。
  • ref: 返回一个 Ref 对象，它指向 source[key]。

• toRefs：批量保持响应性

  如果有很多属性需要解构并保持响应性，一个个使用 toRef 岂不是很麻烦？ 别担心，toRefs 可以批量完成这个任务。它会将响应式对象的所有属性都转换为响应式的引用，并以对象的形式返回。

  继续改造代码：

  <template>
    <div>
      <p>姓名: {{ name }}</p>
      <p>年龄: {{ age }}</p>
      <button @click="updateInfo">更新信息</button>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRefs } from 'vue';
  
  const state = reactive({
    name: '张三',
    age: 30,
  });
  
  const { name, age } = toRefs(state);
  
  function updateInfo() {
    state.name = '李四';
    state.age = 35;
  }
  </script>

  这次，我们使用 toRefs(state) 将 state 对象的所有属性都转换成了响应式的引用，然后通过解构赋值的方式将它们提取出来。 效果和使用 toRef 是一样的，但代码更简洁。

  toRefs 的语法：

  const refs = toRefs(object);

  • object: 响应式对象 (reactive object)。
  • refs: 返回一个对象，该对象的每个属性都是一个 Ref 对象，指向原始对象的对应属性。

使用场景分析：什么情况下用 toRef，什么情况下用 toRefs？

• toRef：

  • 只需要对单个属性保持响应性，不想解构整个对象时。
  • 需要将某个属性传递给子组件，并希望子组件能够修改该属性，且父组件也能同步更新时（父子组件共享状态）。
  • 当你想手动控制哪些属性需要保持响应性时。

• toRefs：

  • 需要对多个属性保持响应性，并且希望以解构赋值的方式提取它们时。
  • 想一次性将响应式对象的所有属性都转换为响应式引用时。

代码示例：不同场景下的应用

• 场景一：父子组件共享状态

  父组件：

  <template>
    <div>
      <p>父组件：{{ message }}</p>
      <ChildComponent :message="messageRef" />
    </div>
  </template>
  
  <script setup>
  import { reactive, toRef } from 'vue';
  import ChildComponent from './ChildComponent.vue';
  
  const state = reactive({
    message: 'Hello from parent',
  });
  
  const messageRef = toRef(state, 'message');
  
  </script>

  子组件 (ChildComponent.vue)：

  <template>
    <div>
      <p>子组件：{{ message }}</p>
      <button @click="updateMessage">修改 message</button>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    message: {
      type: String,
      required: true,
    },
  });
  
  function updateMessage() {
    props.message = 'Hello from child'; // 子组件修改父组件的状态
  }
  </script>

  在这个例子中，父组件使用 toRef 将 state.message 转换为 messageRef，然后将 messageRef 传递给子组件。 子组件通过 props.message 访问和修改这个值。 由于 messageRef 是一个响应式引用，所以父子组件的状态可以同步更新。 注意，在setup语法糖下，props是只读的，但是props.message是一个ref对象，所以可以直接修改props.message.value,从而达到修改父组件状态的目的。

• 场景二：在函数中使用响应式对象的多个属性

  <template>
    <div>
      <p>姓名: {{ name }}</p>
      <p>年龄: {{ age }}</p>
      <button @click="processData">处理数据</button>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRefs } from 'vue';
  
  const state = reactive({
    name: '张三',
    age: 30,
    city: '北京'
  });
  
  const { name, age } = toRefs(state);
  
  function processData() {
    // 使用 name 和 age 进行一些处理
    console.log(`姓名: ${name.value}, 年龄: ${age.value}`); // 注意要访问 .value
  }
  </script>

  在这个例子中，我们使用 toRefs 将 state 对象的 name 和 age 转换为响应式引用，然后在 processData 函数中使用它们。 需要注意的是，由于 name 和 age 是 Ref 对象，所以需要通过 .value 才能访问它们的值。

• 场景三：与第三方库结合使用

  有些第三方库可能不直接支持 Vue 的响应式系统。在这种情况下，可以使用 toRef 或 toRefs 将 Vue 的响应式数据转换为库可以接受的格式。

  例如，假设有一个名为 formatData 的第三方库函数，它接收一个普通对象作为参数：

  //  第三方库函数
  function formatData(data) {
    return `Formatted data: ${data.name} - ${data.age}`;
  }

  在 Vue 组件中，可以使用 toRefs 将响应式对象转换为普通对象：

  <template>
    <div>
      <p>{{ formattedData }}</p>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRefs, computed } from 'vue';
  
  const state = reactive({
    name: '张三',
    age: 30,
  });
  
  const data = toRefs(state); // 或者 const data = reactive(state);
  
  const formattedData = computed(() => {
    return formatData({name: data.name.value, age: data.age.value}); // 传递普通对象给第三方库
  });
  </script>

注意事项：toRef 和 toRefs 的一些坑

• 访问 Ref 对象的值： 记住，toRef 和 toRefs 返回的是 Ref 对象，所以需要通过 .value 才能访问它们的值。 否则，你只会得到一个 Ref 对象，而不是实际的数据。
• 只读的 props： 在 setup 语法糖中，props 是只读的。这意味着你不能直接修改 props 对象本身。但是，如果 props 中的某个属性是一个 Ref 对象 (比如通过 toRef 传递过来的)，你可以修改 Ref 对象的值 (即 props.myRef.value)，从而间接修改父组件的状态。
• toRefs 的局限性： toRefs 只能转换响应式对象自身拥有的属性。 如果对象是通过 Object.defineProperty 或其他方式动态添加的属性，toRefs 无法跟踪这些属性的变化。
• 性能考虑： 如果你的对象非常大，并且只需要对少数几个属性保持响应性，那么使用 toRef 可能比 toRefs 更高效，因为 toRefs 会遍历整个对象。

• 解构后的重命名： 如果解构后需要重命名变量，需要手动处理。 例如：

  <script setup>
  import { reactive, toRefs } from 'vue';
  
  const state = reactive({
    firstName: '张',
    lastName: '三',
  });
  
  const { firstName: name, lastName: family } = toRefs(state); // 错误！
  
  console.log(name.value, family.value); // 无法正常工作
  
  // 正确做法：
  const name = toRef(state, 'firstName');
  const family = toRef(state, 'lastName');
  
  console.log(name.value, family.value);
  </script>

总结：toRef 和 toRefs，响应式解构的利器

toRef 和 toRefs 是 Vue 3 Composition API 中处理响应式解构问题的强大工具。 它们可以让你在解构响应式对象的同时，保持属性的响应性，避免数据同步的问题。 掌握它们，你就能写出更健壮、更易维护的 Vue 3 代码。

特性	toRef	toRefs
作用	为单个属性创建响应式引用。	为响应式对象的所有属性创建响应式引用。
参数	响应式对象，属性名。	响应式对象。
返回值	一个 Ref 对象。	一个包含 Ref 对象的对象。
适用场景	只需对单个属性保持响应性。	需要对多个属性保持响应性，并进行解构。
性能	适用于只需监听少量属性的情况。	适用于需要监听对象的大部分属性的情况。
访问方式	ref.value	refs.propertyName.value

希望今天的讲座对你有所帮助！ 以后再遇到响应式解构的问题，记得想起 toRef 和 toRefs 这哥俩哦！ 祝大家编程愉快！