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

嘿，大家好！今天咱们来聊聊 Vue 3 里面一对儿相当重要，但又容易让人迷糊的哥俩：toRef 和 toRefs。这俩哥们儿，专门负责在解构 reactive 对象的时候，保持那份难得的响应性。如果你用 Vue 的时候，时不时觉得数据更新了，视图咋没动静？那很可能就是这俩哥们儿没用对地方。咱们今天就来扒一扒它们的源码，看看它们到底是怎么工作的，以及怎么正确地使用它们。

一、开场白：响应式世界的难题

在 Vue 的世界里，reactive 对象就像是一个装满了神奇糖果的盒子。只要你改变了盒子里任何一颗糖果，Vue 就会自动通知所有盯着这个盒子的人，让他们更新自己的显示。

但是，如果你直接从这个盒子里掏出一颗糖果，比如这样：

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

const name = state.name; // 直接掏出来了！
name = '李四'; // 修改了值

console.log(state.name); // 还是 '张三'！ 视图也不会更新！

你会发现，即使你把这颗糖果（name）改头换面了，盒子里那颗糖果（state.name）还是纹丝不动。而且 Vue 也不会知道你动了这颗糖果，所以视图也不会更新。

这是因为 name 只是一个普通的字符串，它和 state.name 之间没有任何关联了。我们只是复制了 state.name 的值而已。

那怎么办呢？我们想要的是，拿到一颗糖果，这颗糖果的变化能够同步到盒子里，而且 Vue 也能知道。这就是 toRef 和 toRefs 要解决的问题。

二、toRef：单刀赴会，保持单个属性的响应性

toRef 的作用很简单：它接收一个 reactive 对象和一个属性名，然后返回一个 ref 对象。这个 ref 对象的值，会和原始 reactive 对象的属性保持同步。换句话说，修改 ref 对象的值，会同时修改 reactive 对象的属性，反之亦然。

// 假设的 toRef 实现 (简化版)
function toRef(target, key) {
  return {
    get value() {
      return target[key];
    },
    set value(newValue) {
      target[key] = newValue;
    }
  };
}

让我们看看怎么用：

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

const nameRef = toRef(state, 'name'); // 创建一个 name 的 ref 对象

console.log(nameRef.value); // '张三'

nameRef.value = '李四'; // 修改 ref 对象的值

console.log(state.name); // '李四'！  reactive 对象的值也变了！
console.log(nameRef.value); // '李四'！

state.name = '王五'; // 修改 reactive 对象的值

console.log(nameRef.value); // '王五'！ ref 对象的值也变了！

看到了吗？ nameRef 就像是 state.name 的一个代理人，它的任何变化都会同步到 state.name，反之亦然。 Vue 也能监听到 nameRef.value 的变化，从而更新视图。

toRef 的源码分析 (简化版)

虽然上面的代码只是一个简化版的 toRef 实现，但它已经能够说明 toRef 的核心思想了：通过 get 和 set 拦截对 ref 对象 value 属性的访问，从而实现对原始 reactive 对象属性的读取和修改。

Vue 3 的 toRef 源码实际上更复杂一些，因为它需要处理一些边界情况，比如：

如果 target 不是一个 reactive 对象，会发生什么？
如果 key 不是 target 的属性，会发生什么？
如果 target 是一个 ref 对象，又会发生什么？

但核心思想是不变的：创建一个 ref 对象，通过 get 和 set 来代理对原始对象的访问。

三、toRefs：组团出道，批量保持多个属性的响应性

toRef 解决了单个属性的响应性问题，但如果我们要同时保持多个属性的响应性呢？一个一个地调用 toRef 显然很麻烦。这时候，toRefs 就派上用场了。

toRefs 接收一个 reactive 对象，然后返回一个 新的对象，这个新对象的每个属性都是一个 ref 对象，对应于原始 reactive 对象的同名属性。

// 假设的 toRefs 实现 (简化版)
function toRefs(target) {
  const result = {};
  for (const key in target) {
    result[key] = toRef(target, key);
  }
  return result;
}

让我们看看怎么用：

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

const stateRefs = toRefs(state); // 创建一个包含 nameRef 和 ageRef 的对象

console.log(stateRefs.name.value); // '张三'
console.log(stateRefs.age.value); // 30

stateRefs.name.value = '李四'; // 修改 nameRef 的值

console.log(state.name); // '李四'！ reactive 对象的值也变了！

state.age = 40; // 修改 reactive 对象的值

console.log(stateRefs.age.value); // 40！ ageRef 的值也变了！

看到了吗？ toRefs 就像是一个批量工厂，它把 state 对象的每个属性都变成了 ref 对象，并且把这些 ref 对象打包成一个新的对象 stateRefs。这样，我们就可以方便地访问和修改 state 对象的属性，同时保持它们的响应性。

toRefs 的源码分析 (简化版)

和 toRef 类似，上面的代码只是一个简化版的 toRefs 实现。 Vue 3 的 toRefs 源码也更加复杂，因为它需要处理一些特殊情况，比如：

如果 target 不是一个 reactive 对象，会发生什么？
如何处理 Symbol 类型的属性？
如何避免重复创建 ref 对象？

但核心思想是不变的：遍历 reactive 对象的每个属性，然后调用 toRef 来创建对应的 ref 对象。

四、toRef 和 toRefs 的应用场景

toRef 和 toRefs 最常见的应用场景就是在解构 reactive 对象的时候。让我们回到文章开头的例子：

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

// const { name, age } = state; // 这样会失去响应性！

const { name, age } = toRefs(state); // 这样就保持了响应性！

name.value = '李四'; // 修改 name 的值

console.log(state.name); // '李四'！ reactive 对象的值也变了！

看到了吗？只要用 toRefs 把 state 对象转换成一个包含 ref 对象的对象，然后再解构，就可以保持 name 和 age 的响应性了。

另一个常见的应用场景是在组件之间传递 reactive 对象的属性。假设我们有一个父组件和一个子组件：

// 父组件
<template>
  <div>
    <p>父组件：{{ state.name }}</p>
    <ChildComponent :name="nameRef" />
  </div>
</template>

<script>
import { reactive, toRef } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const state = reactive({
      name: '张三',
      age: 30
    });

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

    return {
      state,
      nameRef
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>子组件：{{ name }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  props: {
    name: {
      type: String, // 这里需要注意类型，因为传递的是 ref 对象
      required: true
    }
  },
  setup(props) {
    console.log(props.name); // 打印的是一个 ref 对象

    return {
      name: props.name
    };
  }
};
</script>

在这个例子中，我们使用 toRef 把 state.name 转换成一个 ref 对象 nameRef，然后把 nameRef 传递给子组件。这样，子组件就可以通过 props.name.value 来访问和修改 state.name，同时保持了响应性。

五、总结：toRef 和 toRefs 的灵魂

总而言之，toRef 和 toRefs 的灵魂就在于它们能够创建 ref 对象，并且通过 get 和 set 拦截对 ref 对象 value 属性的访问，从而实现对原始 reactive 对象属性的读取和修改。这保证了在解构 reactive 对象或者在组件之间传递 reactive 对象的属性时，能够保持数据的响应性。

函数	作用	返回值类型	使用场景
`toRef`	创建一个 ref 对象，与 `reactive` 对象的单个属性保持响应性同步。	`Ref`	需要保持单个属性响应性，例如在组件间传递单个属性。
`toRefs`	创建一个对象，其每个属性都是一个 ref 对象，与 `reactive` 对象的对应属性保持响应性同步。	`Object`	解构 `reactive` 对象，同时保持多个属性的响应性。

记住，在处理 reactive 对象的时候，要时刻注意数据的响应性。如果你发现数据更新了，视图却没有更新，那很可能就是你没有正确地使用 toRef 和 toRefs。

希望今天的讲解能够帮助大家更好地理解 toRef 和 toRefs 的作用和用法。谢谢大家！

发表回复 取消回复

发表回复取消回复