探讨 Vue 3 源码中 `ref` 函数的实现原理，包括其 `value` 属性的 `getter/setter` 拦截，以及 `toRaw` 和 `markRaw` 的作用。

嘿，大家好！我是老码，今天咱来聊聊 Vue 3 源码里那个神奇的 ref 函数。这玩意儿看着简单，但里面藏着不少小秘密，搞明白它，能让你对 Vue 3 的响应式系统理解更上一层楼。

咱们的目标是：搞清楚 ref 到底是个啥，它的 value 属性是怎么做到响应式的，以及 toRaw 和 markRaw 这俩“黑魔法”是干啥的。

一、 ref：披着马甲的响应式小伙儿

首先，得明确一点：ref 本质上是一个对象。这个对象有个 value 属性，你读取或修改这个 value 时，Vue 3 就能知道，并触发相应的更新。

// 简单来说，ref 大概长这样
interface Ref<T> {
  value: T
}

但光有 value 属性还不够，它还得能被 Vue 3 的响应式系统“盯”上。所以，Vue 3 内部会对这个对象进行“包装”，让它变成一个响应式对象。

用大白话说，就是给 value 属性安上 getter 和 setter 这俩“眼睛”和“耳朵”。

getter（眼睛）： 当你读取 ref.value 的时候，getter 就会被触发，告诉 Vue 3：“有人要看这个值啦！”Vue 3 会记录下这个组件依赖了这个 ref。
setter（耳朵）： 当你修改 ref.value 的时候，setter 就会被触发，告诉 Vue 3：“这个值变了！快通知所有依赖它的组件更新！”

二、源码解剖：ref 的庐山真面目

为了更好的理解，我们来深入一下 Vue 3 的源码 (简化版)。这里只展示核心逻辑，省略了类型定义和一些边界情况的处理。

function ref(value) {
  return createRef(value);
}

function createRef(rawValue) {
  if (isRef(rawValue)) {
    return rawValue;
  }
  return new RefImpl(rawValue);
}

function isRef(value) {
  return !!(value && value.__v_isRef);
}

class RefImpl {
  private _value;
  private _rawValue;
  public readonly __v_isRef = true;

  constructor(rawValue) {
    this._rawValue = rawValue;
    this._value = convert(rawValue); // 如果 value 是对象，会变成 reactive 对象
  }

  get value() {
    track(this, "value"); // 收集依赖
    return this._value;
  }

  set value(newValue) {
    if (hasChanged(newValue, this._rawValue)) {
      this._rawValue = newValue;
      this._value = convert(newValue);
      trigger(this, "value"); // 触发更新
    }
  }
}

const toReactive = (value) => {
  return isObject(value) ? reactive(value) : value
}

const convert = (val) => isObject(val) ? reactive(val) : val

这段代码做了这些事情：

ref(value) 函数： 这是我们调用的入口。它会调用 createRef 函数来创建 ref 对象。
createRef(rawValue) 函数： 先检查传入的值 rawValue 是不是已经是一个 ref 对象了。如果是，就直接返回它。否则，就创建一个新的 RefImpl 实例。
isRef(value) 函数： 用来判断一个值是不是 ref 对象。它通过检查对象上是否有 __v_isRef 属性来判断。
RefImpl 类： 这是 ref 的核心实现。
- _value：真正存储 ref 值的变量。
- _rawValue：存储原始值的变量。
- __v_isRef：这是一个标记，用来标识这个对象是一个 ref 对象。
- constructor(rawValue)：构造函数，接收原始值 rawValue，并将其赋值给 _rawValue。如果 rawValue 是一个对象，那么会使用 reactive() 函数将其转换为一个响应式对象。
- get value()：当读取 ref.value 时，这个 getter 会被调用。它会先调用 track(this, "value") 来收集依赖，然后返回 _value。
- set value(newValue)：当修改 ref.value 时，这个 setter 会被调用。它会先检查新值 newValue 是否与原始值 _rawValue 相同。如果不同，就更新 _rawValue 和 _value，然后调用 trigger(this, "value") 来触发更新。

关键点：

依赖收集 (track)： getter 里的 track(this, "value") 函数非常重要。它负责收集当前组件对这个 ref 的依赖。当 ref 的值发生变化时，Vue 3 就能找到所有依赖这个 ref 的组件，并通知它们更新。
触发更新 (trigger)： setter 里的 trigger(this, "value") 函数负责触发更新。它会通知所有依赖这个 ref 的组件重新渲染。
对象转换 (convert)： 如果 ref 的初始值是一个对象，Vue 3 会使用 reactive() 函数将其转换为一个响应式对象。这意味着，如果你修改了 ref.value 内部的属性，也会触发更新。

三、 toRaw：把响应式对象“脱掉马甲”

有时候，你可能需要拿到一个 ref 对象的原始值，而不是响应式版本。比如，你想比较两个 ref 对象是否相等，但直接比较会比较它们的响应式代理对象，而不是实际的值。

这时候，toRaw 就派上用场了。它可以把一个响应式对象（包括 ref 对象）转换成它的原始值。

// 简单来说，toRaw 大概长这样
function toRaw<T>(observed: T): T {
  return (
    (observed && (observed as Target)[ReactiveFlags.RAW]) || observed
  )
}

使用场景：

import { ref, toRaw } from 'vue';

const obj1 = ref({ count: 0 });
const obj2 = ref({ count: 0 });

console.log(obj1.value === obj2.value); // false (比较的是响应式代理对象)
console.log(toRaw(obj1.value) === toRaw(obj2.value)); // false (即使内容一样，也是不同的对象)

const rawObj1 = toRaw(obj1.value);
const rawObj2 = toRaw(obj2.value);

rawObj1.count = 1; // 修改 rawObj1 不会触发 obj1 的更新
console.log(obj1.value.count); // 0

obj1.value.count = 2; // 修改 obj1.value 会触发更新
console.log(rawObj1.count); // 1

注意事项：

toRaw 返回的是原始值的引用。如果你修改了原始值，不会触发响应式更新。
不要滥用 toRaw。只有在确实需要访问原始值，并且不希望触发响应式更新的情况下才使用它。

四、 markRaw：给对象贴上“免死金牌”

markRaw 的作用是给一个对象贴上一个“免死金牌”，告诉 Vue 3 的响应式系统：“这个对象不要变成响应式对象！碰都不要碰！”

// 简单来说，markRaw 大概长这样
function markRaw<T extends object>(value: T): T {
  def(value, ReactiveFlags.SKIP, true)
  return value
}

使用场景：

性能优化： 如果你有一个非常大的对象，而且这个对象永远不需要响应式更新，那么可以使用 markRaw 来避免 Vue 3 对它进行不必要的响应式转换，从而提高性能。
第三方库： 有些第三方库返回的对象可能不适合被转换为响应式对象。可以使用 markRaw 来防止 Vue 3 对这些对象进行处理。

示例：

import { reactive, markRaw, ref } from 'vue';

const nonReactiveObject = { name: '老码', age: 30 };
markRaw(nonReactiveObject);

const reactiveObject = reactive({
  user: nonReactiveObject,
});

reactiveObject.user.name = '新码'; // 修改 nonReactiveObject 不会触发更新

const myRef = ref(nonReactiveObject);

myRef.value.name = '新新码'; // 修改 nonReactiveObject 不会触发更新

console.log(reactiveObject.user.name); // 新码
console.log(myRef.value.name) // 新新码

注意事项：

markRaw 是一个“深度”操作，它会递归地标记对象的所有属性，使其都不再是响应式的。
一旦对象被 markRaw 标记，就无法再恢复成响应式对象了。
谨慎使用 markRaw。只有在非常确定对象不需要响应式更新的情况下才使用它。

五、 ref、toRaw、markRaw 的关系

为了更清晰地理解这三个函数之间的关系，我们用一个表格来总结一下：

函数	作用	返回值类型	是否触发响应式更新	适用场景
`ref`	创建一个响应式 `ref` 对象。可以存储任何类型的值，当值发生变化时，会触发依赖该 `ref` 对象的组件更新。如果传入的值是对象，则会将对象转换为响应式对象。	`Ref<T>`	是	需要追踪数据变化，并自动更新视图的场景。
`toRaw`	将一个响应式对象（包括 `ref` 对象）转换为它的原始值。返回的是原始对象的引用，修改原始对象不会触发响应式更新。	`T`	否	需要访问原始对象，并且不希望触发响应式更新的场景。例如，比较两个响应式对象是否相等，或者将响应式对象传递给不需要响应式的第三方库。
`markRaw`	标记一个对象为非响应式对象。Vue 3 不会对该对象进行响应式转换，也不会追踪该对象的依赖。	`T`	否	明确知道对象不需要响应式更新，为了提高性能的场景。例如，大型的静态数据结构，或者来自第三方库的对象。

六、总结

ref 是 Vue 3 响应式系统的核心组成部分。它通过 getter/setter 拦截，实现了对值的读取和修改的监听，从而实现了响应式更新。toRaw 和 markRaw 则是在特定场景下使用的“黑魔法”，可以帮助我们更好地控制响应式系统的行为，提高性能，或者处理第三方库的对象。

理解了 ref 的实现原理，以及 toRaw 和 markRaw 的作用，你就能更深入地理解 Vue 3 的响应式系统，写出更高效、更可维护的代码。

希望今天的分享对你有所帮助！下次有机会再跟大家聊聊 Vue 3 的其他有趣的东西。咱们下回见！

发表回复 取消回复

发表回复取消回复