Vue `toRef`与`toRefs`的实现：将普通对象的属性转换为响应性引用的底层技巧

Vue toRef与toRefs：将普通对象的属性转换为响应性引用的底层技巧

大家好，今天我们来深入探讨 Vue 3 中 toRef 和 toRefs 这两个看似简单，但却在构建复杂响应式应用中扮演着关键角色的 API。它们的主要作用是将普通 JavaScript 对象的属性转换为响应式的引用（Ref），从而允许我们更灵活地处理和管理数据。理解它们的底层机制对于编写高效、可维护的 Vue 应用至关重要。

为什么需要 toRef 和 toRefs？

在 Vue 的响应式系统中，我们通常使用 reactive 函数将一个普通对象转换为响应式对象。然而，直接使用 reactive 有时会引入一些问题：

1. 失去原始引用: reactive 返回的是一个新的响应式对象，与原始对象脱钩。对响应式对象的修改不会影响原始对象，反之亦然。
2. 解构的响应性丢失: 直接解构 reactive 对象会导致响应性丢失。解构操作会创建原始值的副本，而不是对响应式属性的引用。

为了解决这些问题，toRef 和 toRefs 应运而生。它们允许我们创建对原始对象属性的响应式引用，从而保持数据的同步性和响应性。

toRef 的工作原理

toRef 函数接收一个对象和一个键名作为参数，并返回一个 Ref 对象，该 Ref 对象的值与原始对象的对应属性保持同步。任何对 Ref 对象 value 的修改都会反映到原始对象的属性上，反之亦然。

让我们先看一个简单的例子：

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

const originalObject = {
  name: 'John',
  age: 30
};

const reactiveObject = reactive(originalObject);

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

effect(() => {
  console.log('Name is:', nameRef.value);
});

nameRef.value = 'Jane'; // 触发 effect，控制台输出 "Name is: Jane"
console.log('Original name:', originalObject.name); // 输出 "Original name: Jane"

在这个例子中，nameRef 是一个 Ref 对象，它指向 reactiveObject.name。当我们修改 nameRef.value 时，reactiveObject.name 也随之改变，反之亦然。

toRef 的底层实现（简化版）

为了更好地理解 toRef 的工作原理，我们可以尝试编写一个简化版的 toRef 函数：

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

这个简化版的 toRef 函数返回一个包含 get 和 set 访问器的对象。

• get 访问器简单地返回 target[key] 的值。
• set 访问器将 newValue 赋值给 target[key]。

这个简化的实现已经能够实现基本的响应式关联。当读取 ref.value 时，实际上读取的是 target[key] 的值；当设置 ref.value 时，实际上设置的是 target[key] 的值。

Vue 3 源码中 toRef 的实现

实际上，Vue 3 的 toRef 实现要复杂得多，因为它需要处理各种边缘情况，例如处理 Symbol 类型的 key，处理非响应式对象等。 为了更全面地理解，我们来看一下Vue 3 源码中 toRef 的简化版。

import { isRef, trackRefValue, triggerRefValue } from './reactiveEffect'; // 简化后的依赖

export function toRef(target: any, key: string | symbol): any {
  if (isRef(target[key])) {
    return target[key]
  }
  return new ObjectRefImpl(target, key)
}

class ObjectRefImpl {
  public readonly __v_isRef = true

  constructor(
    private readonly _object: object,
    private readonly _key: string | symbol,
  ) {}

  get value() {
    return this._object[this._key]
  }

  set value(newVal) {
    this._object[this._key] = newVal
  }
}

// 假设的辅助函数
function isRef(value: any): boolean {
  return !!(value && value.__v_isRef);
}

function trackRefValue(ref: any) {
  // 模拟依赖追踪，在实际 Vue 实现中会更复杂
}

function triggerRefValue(ref: any) {
  // 模拟触发更新，在实际 Vue 实现中会更复杂
}

关键点：

• ObjectRefImpl 是一个类，它封装了对原始对象属性的访问。
• get value() 访问器读取 _object[_key] 的值，并且调用 trackRefValue 触发依赖追踪。
• set value(newVal) 访问器设置 _object[_key] 的值，并且调用 triggerRefValue 触发更新。
• isRef 检查目标属性是否已经是 Ref，如果是，则直接返回该 Ref。

toRefs 的工作原理

toRefs 函数接收一个对象作为参数，并返回一个新的对象，该对象的每个属性都是一个 Ref 对象，指向原始对象的对应属性。

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

const originalObject = {
  name: 'John',
  age: 30
};

const reactiveObject = reactive(originalObject);

const refsObject = toRefs(reactiveObject);

effect(() => {
  console.log('Name is:', refsObject.name.value);
  console.log('Age is:', refsObject.age.value);
});

refsObject.name.value = 'Jane'; // 触发 effect，控制台输出 "Name is: Jane"
console.log('Original name:', originalObject.name); // 输出 "Original name: Jane"

在这个例子中，refsObject.name 和 refsObject.age 都是 Ref 对象，分别指向 reactiveObject.name 和 reactiveObject.age。

toRefs 的底层实现（简化版）

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

这个简化版的 toRefs 函数遍历目标对象的每个属性，并使用 toRef 函数为每个属性创建一个 Ref 对象，然后将这些 Ref 对象添加到新的对象中。

Vue 3 源码中 toRefs 的实现

import { toRef } from './toRef'

export function toRefs<T extends object>(
  object: T
): {
  [K in keyof T]: ToRef<T[K]>
} {
  if (__DEV__ && !isProxy(object)) {
    console.warn(`toRefs() expects a reactive object but received a plain one.`)
  }
  const ret: any = {}
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  return ret
}

type ToRef<T> = T extends Ref ? T : Ref<T>

关键点：

• toRefs 函数遍历对象的所有 key。
• 对每个 key，调用 toRef 函数创建一个 Ref。
• 返回一个包含所有 Ref 的新对象。
• 在开发模式下，会检查传入的 object 是否是 Proxy 对象，如果不是则会给出警告。

toRef 与 toRefs 的使用场景

• 组件复用: 当我们需要将一个响应式对象的部分属性传递给子组件时，可以使用 toRefs 将这些属性转换为 Ref 对象，然后通过 props 传递给子组件。这样，子组件就可以直接修改这些属性，而无需通过事件来通知父组件。

  // ParentComponent.vue
  <template>
    <ChildComponent v-bind="refsObject" />
  </template>
  
  <script setup>
  import { reactive, toRefs } from 'vue';
  import ChildComponent from './ChildComponent.vue';
  
  const state = reactive({
    name: 'John',
    age: 30
  });
  
  const refsObject = toRefs(state);
  </script>
  
  // ChildComponent.vue
  <template>
    <div>
      <input v-model="name" />
      <p>Age: {{ age }}</p>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    }
  });
  
  // 实际上 name 和 age 已经是 ref，直接使用即可。
  </script>

• 解构响应式对象: 当我们需要解构一个响应式对象，并且希望保持解构后的属性的响应性时，可以使用 toRefs 将对象转换为一个包含 Ref 对象的对象，然后解构这个对象。

  import { reactive, toRefs, effect } from 'vue';
  
  const state = reactive({
    name: 'John',
    age: 30
  });
  
  const { name, age } = toRefs(state);
  
  effect(() => {
    console.log('Name is:', name.value);
    console.log('Age is:', age.value);
  });
  
  name.value = 'Jane'; // 触发 effect

• 与 Composition API 配合使用: 在 Composition API 中，我们经常需要将响应式数据暴露给模板。toRefs 可以方便地将响应式对象的属性转换为 Ref 对象，然后将其作为组件的 setup 函数的返回值。

  <template>
    <div>
      <p>Name: {{ name }}</p>
      <p>Age: {{ age }}</p>
    </div>
  </template>
  
  <script setup>
  import { reactive, toRefs } from 'vue';
  
  const state = reactive({
    name: 'John',
    age: 30
  });
  
  const { name, age } = toRefs(state);
  </script>

toRef 与 toRefs 的区别

特性	toRef	toRefs
输入	一个响应式对象和一个键名	一个响应式对象
输出	一个 Ref 对象，指向原始对象的对应属性	一个新的对象，其每个属性都是一个 Ref 对象，指向原始对象的对应属性
作用	创建对单个属性的响应式引用	创建对整个对象的响应式引用集合
使用场景	需要对单个属性进行响应式追踪时	需要将对象的多个属性暴露为响应式引用时

使用时的注意事项

1. 只适用于响应式对象: toRef 和 toRefs 应该只用于响应式对象。如果传递给它们一个普通对象，它们仍然会创建 Ref 对象，但是这些 Ref 对象不会与原始对象建立响应式关联。也就是说，修改 Ref 对象的值不会影响原始对象，反之亦然。
2. 避免过度使用: 虽然 toRef 和 toRefs 提供了很大的灵活性，但是过度使用它们可能会导致代码难以理解和维护。只有在真正需要保持对原始对象的引用的情况下才应该使用它们。
3. toRefs 对 Symbol 类型的 Key 的支持: toRefs 只能处理字符串类型的 key，不能处理 Symbol 类型的 key。

总结：灵活地创建响应式引用，管理数据更高效

toRef 和 toRefs 是 Vue 3 中强大的工具，它们允许我们创建对响应式对象属性的响应式引用，从而更灵活地处理和管理数据。 通过理解它们的底层机制和使用场景，我们可以编写更高效、可维护的 Vue 应用。 谨慎使用，可以避免不必要的复杂性。

更多IT精英技术系列讲座，到智猿学院