分析 Vue 3 源码中 `toRef` 和 `toRefs` 函数的实现细节，以及它们在解构 `reactive` 对象时保持响应性的作用。

Vue 3 响应式魔法：toRef 和 toRefs 的解密之旅

大家好！今天咱们来聊聊 Vue 3 响应式系统中的两个小而美的函数：toRef 和 toRefs。 它们就像是响应式数据世界里的魔法师，能让你的普通变量拥有响应式超能力，尤其是在处理 reactive 对象时，更是能让你事半功倍。

先别被“源码”两个字吓跑，咱们的目标不是逐行解读 Vue 3 的代码（那样太枯燥了），而是理解它们背后的原理和使用场景，最终能灵活运用到你的项目中。

响应式数据的难题

在 Vue 中，reactive 函数可以将一个普通对象转换成响应式对象。这意味着当这个对象中的属性发生变化时，所有依赖于这些属性的视图都会自动更新。

import { reactive, effect } from 'vue';

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

effect(() => {
  console.log(`姓名: ${state.name}, 年龄: ${state.age}`);
});

state.name = '李四'; // 触发 effect，控制台输出 "姓名: 李四, 年龄: 30"

这段代码看起来很美好，但是如果我们想要把 state 中的某个属性单独拿出来使用，比如在组件的 props 中传递，或者在函数内部使用，问题就来了。

// 假设我们想把 state.name 传递给一个子组件
// 错误示范！

const myName = state.name; // myName 只是一个普通字符串，不是响应式的

effect(() => {
  console.log(`myName: ${myName}`);
});

state.name = '王五'; // 不会触发 effect，控制台仍然输出 "myName: 李四"

为什么会这样？因为 myName 只是一个普通的字符串，它只是在赋值的时候获取了 state.name 的值，之后就和 state.name 脱离了关系。state.name 变化的时候，myName 不会跟着变化。

这就是 toRef 和 toRefs 出现的原因：它们能够解决这个问题，让你在解构 reactive 对象时，仍然保持响应性。

toRef：给变量注入响应式灵魂

toRef 函数的作用是将 reactive 对象的一个属性转换为一个 ref 对象。ref 对象拥有一个 .value 属性，访问或修改这个 .value 属性，就能触发响应式更新。

import { reactive, effect, toRef } from 'vue';

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

const myName = toRef(state, 'name'); // myName 是一个 ref 对象

effect(() => {
  console.log(`myName: ${myName.value}`);
});

state.name = '赵六'; // 触发 effect，控制台输出 "myName: 赵六"
myName.value = '田七'; // 触发 effect，并修改 state.name 的值，控制台输出 "myName: 田七"
console.log(state.name) // 田七

可以看到，通过 toRef 创建的 myName，它和 state.name 之间建立了一种响应式的连接。修改 state.name 或者 myName.value 都会触发 effect，并且它们的值会保持同步。

toRef 的源码 (简化版)

虽然我们不打算逐行解读源码，但是了解一下 toRef 的大致实现原理还是很有帮助的。下面是一个简化版的 toRef 实现，主要展示了核心逻辑：

function toRef(target, key) {
  return {
    get value() {
      return target[key];
    },
    set value(newValue) {
      target[key] = newValue;
    },
  };
}

这个简化版的 toRef 函数返回一个对象，这个对象拥有 value 的 getter 和 setter。getter 负责返回 target[key] 的值，setter 负责设置 target[key] 的值。

重点在于，每次访问 myName.value 的时候，都会去访问 state[name] 的值；每次设置 myName.value 的时候，都会去设置 state[name] 的值。这样就保证了 myName 和 state.name 之间的响应式连接。

toRef 的使用场景

• 传递 reactive 对象的属性给子组件： 这是 toRef 最常见的用途。 你可以将 reactive 对象的属性转换为 ref 对象，然后将 ref 对象传递给子组件的 props。 这样，即使父组件的 reactive 对象发生变化，子组件也能自动更新。

  // 父组件
  <template>
    <ChildComponent :name="userName" />
  </template>
  
  <script setup>
  import { reactive, toRef } from 'vue';
  import ChildComponent from './ChildComponent.vue';
  
  const state = reactive({
    name: '张三',
  });
  
  const userName = toRef(state, 'name');
  </script>
  
  // 子组件 (ChildComponent.vue)
  <template>
    <div>{{ name }}</div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    name: {
      type: String, // 注意这里是 String 类型，而不是 ref 对象
      required: true,
    },
  });
  </script>

  注意： 子组件的 props 定义中，name 的类型是 String，而不是 ref 对象。这是因为 Vue 会自动解包 ref 对象，将它的 .value 属性传递给子组件。 如果你想在子组件中修改 name 的值，你需要使用 emit 事件来通知父组件修改 state.name。

• 在函数内部使用 reactive 对象的属性： 如果你需要在函数内部使用 reactive 对象的属性，并且希望这个属性是响应式的，可以使用 toRef 将它转换为 ref 对象。

  import { reactive, toRef, effect } from 'vue';
  
  const state = reactive({
    count: 0,
  });
  
  function increment(countRef) {
    countRef.value++;
  }
  
  const countRef = toRef(state, 'count');
  
  effect(() => {
    console.log(`count: ${countRef.value}`);
  });
  
  increment(countRef); // 触发 effect，控制台输出 "count: 1"

toRefs：批量注入响应式灵魂

toRefs 函数的作用是将一个 reactive 对象的所有属性都转换为 ref 对象。它返回一个对象，这个对象的每个属性都是一个 ref 对象，对应于原始 reactive 对象的属性。

import { reactive, toRefs, effect } from 'vue';

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

const refs = toRefs(state); // refs 是一个对象，refs.name 和 refs.age 都是 ref 对象

effect(() => {
  console.log(`姓名: ${refs.name.value}, 年龄: ${refs.age.value}`);
});

state.name = '李四'; // 触发 effect，控制台输出 "姓名: 李四, 年龄: 30"
refs.age.value = 35; // 触发 effect，并修改 state.age 的值，控制台输出 "姓名: 李四, 年龄: 35"

可以看到，toRefs 就像一个批量转换器，它可以将 reactive 对象的所有属性都转换为 ref 对象，方便你一次性地获取多个响应式属性。

toRefs 的源码 (简化版)

toRefs 的实现原理其实很简单，它只是遍历 reactive 对象的每个属性，然后使用 toRef 将它们转换为 ref 对象。

function toRefs(target) {
  const result = {};
  for (const key in target) {
    result[key] = toRef(target, key);
  }
  return result;
}

toRefs 的使用场景

• 解构 reactive 对象： 这是 toRefs 最常见的用途。 你可以使用 toRefs 将 reactive 对象转换为一个包含 ref 对象的新对象，然后使用解构语法来获取这些 ref 对象。 这样，你就可以在代码中更方便地使用这些响应式属性，而不用每次都写 state.name 这样的代码。

  <template>
    <div>
      <p>姓名: {{ name }}</p>
      <p>年龄: {{ age }}</p>
      <button @click="incrementAge">增加年龄</button>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRefs } from 'vue';
  
  const state = reactive({
    name: '张三',
    age: 30,
  });
  
  const { name, age } = toRefs(state); // 解构 ref 对象
  
  function incrementAge() {
    age.value++;
  }
  </script>

  在这个例子中，我们使用 toRefs 将 state 对象转换为一个包含 ref 对象的新对象，然后使用解构语法获取了 name 和 age 这两个 ref 对象。 这样，我们就可以直接在模板中使用 name 和 age，而不用每次都写 state.name 和 state.age。

• 在 setup 函数中返回 reactive 对象： 在 Vue 3 的 setup 函数中，如果你想返回一个 reactive 对象，并且希望这个对象的属性是响应式的，可以使用 toRefs 将它转换为一个包含 ref 对象的新对象。

  <template>
    <div>
      <p>姓名: {{ name }}</p>
      <p>年龄: {{ age }}</p>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRefs } from 'vue';
  
  function useMyData() {
    const state = reactive({
      name: '张三',
      age: 30,
    });
  
    return toRefs(state); // 返回一个包含 ref 对象的新对象
  }
  
  const { name, age } = useMyData();
  </script>

  在这个例子中，我们定义了一个 useMyData 函数，这个函数返回一个 reactive 对象。 然后，我们使用 toRefs 将这个 reactive 对象转换为一个包含 ref 对象的新对象，并将其返回。 这样，我们就可以在组件中使用 name 和 age 这两个响应式属性。

toRef vs toRefs：选择困难症？

现在你可能有点晕了，toRef 和 toRefs 到底该怎么选？ 其实很简单，根据你的需求来选择：

函数	作用	使用场景
toRef	将 reactive 对象的单个属性转换为 ref 对象	1. 将 reactive 对象的属性传递给子组件。 2. 在函数内部使用 reactive 对象的属性，并且希望这个属性是响应式的。
toRefs	将 reactive 对象的所有属性转换为 ref 对象	1. 解构 reactive 对象，方便在代码中使用响应式属性。 2. 在 setup 函数中返回 reactive 对象，并且希望这个对象的属性是响应式的。

简单来说，如果你只需要处理 reactive 对象的单个属性，就用 toRef；如果你需要处理 reactive 对象的多个属性，就用 toRefs。

避坑指南

在使用 toRef 和 toRefs 的时候，有一些坑需要注意：

• 不要过度使用： 虽然 toRef 和 toRefs 很好用，但是不要过度使用。 如果你只需要在组件中使用 reactive 对象，可以直接在模板中使用 state.name 这样的代码，而不需要使用 toRef 或 toRefs。 只有在你需要将 reactive 对象的属性传递给子组件，或者需要在函数内部使用 reactive 对象的属性，并且希望这个属性是响应式的，才需要使用 toRef 或 toRefs。

• 注意 ref 对象的解包： 在 Vue 3 中，ref 对象会自动解包，这意味着你可以直接在模板中使用 name，而不需要写 name.value。 但是，在 JavaScript 代码中，你需要手动解包 ref 对象，才能获取它的值。

• toRefs 不会追踪新添加的属性： 如果你在 reactive 对象中添加了一个新的属性，toRefs 不会自动将这个属性转换为 ref 对象。 你需要手动使用 toRef 将这个属性转换为 ref 对象。

  import { reactive, toRefs, toRef, effect } from 'vue';
  
  const state = reactive({
    name: '张三',
  });
  
  const refs = toRefs(state);
  
  state.age = 30; // 添加一个新的属性
  
  // refs.age 是 undefined，因为它没有被转换为 ref 对象
  
  const ageRef = toRef(state, 'age'); // 手动将 age 转换为 ref 对象
  
  effect(() => {
    console.log(`年龄: ${ageRef.value}`);
  });
  
  state.age = 35; // 触发 effect，控制台输出 "年龄: 35"

总结

toRef 和 toRefs 是 Vue 3 响应式系统中的两个非常有用的函数。 它们可以让你在解构 reactive 对象时，仍然保持响应性，方便你在代码中使用响应式属性。

希望今天的讲解能够帮助你更好地理解 toRef 和 toRefs 的原理和使用场景，并在你的 Vue 项目中灵活运用它们。 记住，理解原理比死记硬背 API 更重要！ 掌握了这些魔法，你就能在 Vue 3 的响应式世界里自由驰骋，写出更优雅、更高效的代码。

今天的分享就到这里，谢谢大家！