Vue 3源码深度解析之：`Vue`的`Ref`实现：从`ref.value`到`Proxy`的内部转换。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，晚上好！今天咱们不聊八卦，也不谈风月，就来扒一扒Vue 3的“Ref”这个小妖精的底裤，看看它到底是怎么从ref.value变身成Proxy的。准备好了吗？系好安全带，咱们开车了！

开场白：Ref 是个啥？

在Vue 3的世界里，Ref就相当于一个“引用”，或者你可以理解成一个“指针”，指向着一个响应式的数据。但是，和传统的指针不同，这个“指针”非常智能，你修改了它指向的值，Vue会自动帮你更新UI。

这玩意儿怎么用呢？很简单：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个 Ref 对象，初始值为 0

    const increment = () => {
      count.value++; // 通过 .value 来修改 Ref 的值
      console.log(count.value);
    };

    return {
      count,
      increment,
    };
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
};

在这个例子中，count就是一个Ref对象，它指向了数字0。注意，我们是通过count.value来访问和修改它的值，而不是直接使用count。

为什么要用.value？

这是个好问题！直接使用count会怎么样呢？答案是：你会得到一个Ref对象，而不是它指向的值。Vue 3之所以要这样设计，是有它的道理的。接下来，我们就深入源码，看看Ref内部是如何工作的。

Ref 的内部结构：从 ref() 到 RefImpl

让我们从ref()函数开始，看看它是如何创建Ref对象的。

// 简化版的 ref() 函数实现 (vue/packages/reactivity/src/ref.ts)
function ref(value) {
  return createRef(value);
}

function createRef(rawValue, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue;
  }
  return new RefImpl(rawValue, shallow);
}

function isRef(r) {
  return !!(r && r.__v_isRef === true);
}

这段代码做了几件事：

ref(value)：接收一个初始值value作为参数。
isRef(rawValue): 检查传入的值是否已经是一个Ref对象，如果是，直接返回该Ref对象，防止重复包裹。
createRef(value)：调用createRef函数来创建Ref对象。createRef函数实际上是创建了一个RefImpl的实例。

等等，RefImpl是个啥？它就是Ref接口的具体实现类，也是Ref的核心所在。

// 简化版的 RefImpl 类 (vue/packages/reactivity/src/ref.ts)
class RefImpl {
  private _value;
  private _rawValue; // 保存原始值，用于 shallowRef
  public readonly __v_isRef = true;

  constructor(value, public readonly __v_isShallow = false) {
    this._rawValue = value;
    this._value = __v_isShallow ? value : convert(value); //如果是shallowRef，则不进行转换
  }

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

  set value(newVal) {
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal;
      this._value = this.__v_isShallow ? newVal : convert(newVal);
      trigger(this, 'value'); // 触发更新
    }
  }
}

function convert(val) {
    return isObject(val) ? reactive(val) : val;
}

让我们逐行解释一下：

_value: 这是Ref对象真正存储值的地方。
_rawValue: 保存原始值，用于 shallowRef (浅层响应式) 的情况。
__v_isRef = true: 一个标志，用于判断一个对象是否是Ref对象。
constructor(value)：构造函数，接收初始值value，并将其赋值给_value。如果初始值是对象，会使用 reactive 函数将其转换为响应式对象。
get value()：value的getter方法，当访问ref.value时，会触发这个方法。它会调用track(this, 'value')进行依赖收集，也就是告诉Vue，这个Ref对象被哪些地方使用了。
set value(newVal)：value的setter方法，当修改ref.value时，会触发这个方法。它会检查新值和旧值是否相同，如果不同，则更新_value，并调用trigger(this, 'value')触发更新，通知所有依赖这个Ref对象的地方进行更新。

总结一下：RefImpl类就是一个简单的包装器，它把原始值存储在_value属性中，并提供了value的getter和setter方法，用于访问和修改这个值。同时，它还负责依赖收集和触发更新。

依赖收集与触发更新：track() 和 trigger()

track()和trigger()是Vue 3响应式系统的核心，它们负责建立依赖关系和触发更新。让我们简单了解一下它们的工作原理。

track(target, key)

track()函数的作用是收集依赖。当访问一个响应式对象的属性时，track()函数会被调用，它会把当前正在执行的effect函数（可以理解为组件的渲染函数或者计算属性）添加到该属性的依赖列表中。

你可以把track()函数想象成一个“登记员”，它会记录下哪些地方使用了这个Ref对象，以便在Ref对象的值发生变化时，能够通知这些地方进行更新。
trigger(target, key)

trigger()函数的作用是触发更新。当一个响应式对象的属性发生变化时，trigger()函数会被调用，它会遍历该属性的依赖列表，并执行所有依赖的effect函数。

你可以把trigger()函数想象成一个“通知员”，它会通知所有使用了这个Ref对象的地方，告诉它们：“嘿，哥们儿，值变了，赶紧更新一下！”

Proxy 的登场：reactive() 和 readonly()

前面我们提到，如果ref()接收的初始值是一个对象，那么Vue会使用reactive()函数将其转换为一个响应式对象。reactive()函数的作用就是创建一个Proxy对象，用于拦截对该对象属性的访问和修改。

// 简化版的 reactive() 函数实现 (vue/packages/reactivity/src/reactive.ts)
function reactive(target) {
  if (isReadonly(target)) {
    return target;
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  );
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  if (!isObject(target)) {
    return target;
  }

  if (
    targetMap.has(target)
  ) {
    return targetMap.get(target);
  }

  const proxy = new Proxy(
    target,
    baseHandlers
  );

  targetMap.set(target, proxy);
  return proxy;
}

const mutableHandlers: ProxyHandler<object> = {
  get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return true
    }
    track(target, key)
    const res = Reflect.get(target, key, receiver)
    return isObject(res) ? reactive(res) : res
  },
  set(target, key, value, receiver) {
    const oldValue = (target)[key];
    const result = Reflect.set(target, key, value, receiver);
    if (hasChanged(value, oldValue)) {
      trigger(target, key)
    }
    return result
  }
}

让我们逐行解释一下：

reactive(target)：接收一个对象target作为参数。
createReactiveObject(target)：创建一个Proxy对象，用于拦截对target对象属性的访问和修改。
Proxy(target, handler)：Proxy构造函数，接收两个参数：要代理的对象target和一个处理器对象handler。
handler.get(target, key, receiver)：当访问target对象的属性key时，会触发这个方法。它会调用track(target, key)进行依赖收集，并返回属性key的值。
handler.set(target, key, value, receiver)：当修改target对象的属性key时，会触发这个方法。它会检查新值和旧值是否相同，如果不同，则更新target对象的属性key，并调用trigger(target, key)触发更新。

简单来说，reactive()函数就是利用Proxy来劫持对对象属性的访问和修改，从而实现响应式。

从 ref.value 到 Proxy 的转换

现在，我们终于可以回答最初的问题了：Ref是如何从ref.value变身成Proxy的？

答案就在RefImpl的构造函数中：

constructor(value, public readonly __v_isShallow = false) {
    this._rawValue = value;
    this._value = __v_isShallow ? value : convert(value); //如果是shallowRef，则不进行转换
}

function convert(val) {
    return isObject(val) ? reactive(val) : val;
}

如果ref()接收的初始值是一个对象，那么convert(value)函数会被调用，它会使用reactive()函数将这个对象转换为一个Proxy对象，并将这个Proxy对象赋值给_value。

也就是说，当你访问ref.value时，你实际上访问的是一个Proxy对象。这个Proxy对象会拦截对它属性的访问和修改，并自动进行依赖收集和触发更新。

总结：Ref 的工作流程

让我们总结一下Ref的工作流程：

调用ref(value)函数，创建一个RefImpl的实例。
如果value是一个对象，则使用reactive(value)将其转换为一个Proxy对象。
将value（或者Proxy对象）存储在RefImpl的_value属性中。
当访问ref.value时，会触发RefImpl的get value()方法，该方法会进行依赖收集，并返回_value的值。
当修改ref.value时，会触发RefImpl的set value(newVal)方法，该方法会更新_value的值，并触发更新。

可以用表格总结如下：

步骤	函数/方法	作用
1. 创建Ref	`ref(value)`	创建一个 `RefImpl` 实例，如果 `value` 是对象，则进行响应式转换。
2. 对象响应式转换	`reactive(value)`	将普通对象转换为 `Proxy` 对象，实现响应式。
3. 访问 `ref.value`	`RefImpl.get value()`	收集依赖（`track`），返回存储的 `_value`。如果 `_value` 是 `Proxy` 对象，则访问其属性会触发 `Proxy` 的 `get` 陷阱，继续进行依赖收集。
4. 修改 `ref.value`	`RefImpl.set value(newVal)`	检查新值和旧值是否相同，如果不同，则更新 `_value`，并触发更新（`trigger`）。如果 `_value` 是 `Proxy` 对象，则修改其属性会触发 `Proxy` 的 `set` 陷阱，继续触发更新。
5. 依赖收集	`track(target, key)`	将当前激活的 `effect` 函数（例如组件的渲染函数）添加到 `target` 的 `key` 属性的依赖列表中。
6. 触发更新	`trigger(target, key)`	遍历 `target` 的 `key` 属性的依赖列表，执行所有依赖的 `effect` 函数，从而触发组件的重新渲染。

shallowRef：浅层响应式

Vue 3还提供了一个shallowRef()函数，用于创建浅层响应式的Ref对象。与ref()不同，shallowRef()不会对初始值进行递归的响应式转换。也就是说，如果初始值是一个对象，那么只有这个对象本身是响应式的，而它的属性不是响应式的。

import { shallowRef } from 'vue';

export default {
  setup() {
    const state = shallowRef({ count: 0 });

    const increment = () => {
      // ✅ 不会触发更新
      state.value.count++;
      console.log(state.value.count);

      // ✅ 会触发更新
      state.value = { ...state.value }; // 创建一个新的对象
    };

    return {
      state,
      increment,
    };
  },
  template: `
    <div>
      <p>Count: {{ state.count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
};

在这个例子中，state是一个shallowRef对象，它指向一个包含count属性的对象。直接修改state.value.count不会触发更新，因为count属性不是响应式的。只有当我们创建一个新的对象并将其赋值给state.value时，才会触发更新。

shallowRef的实现非常简单，它只需要在RefImpl的构造函数中阻止递归的响应式转换即可：

// 简化版的 RefImpl 类 (vue/packages/reactivity/src/ref.ts)
class RefImpl {
  private _value;
  private _rawValue; // 保存原始值，用于 shallowRef
  public readonly __v_isRef = true;

  constructor(value, public readonly __v_isShallow = false) {
    this._rawValue = value;
    this._value = __v_isShallow ? value : convert(value); //如果是shallowRef，则不进行转换
  }

  // ...
}

在RefImpl的构造函数中，如果__v_isShallow为true，则不会调用reactive()函数进行响应式转换，直接将原始值赋值给_value。

结束语：Ref 的魅力

通过今天的讲解，相信大家对Vue 3的Ref有了更深入的了解。Ref不仅仅是一个简单的“指针”，它还是Vue 3响应式系统的核心组成部分。它通过Proxy来实现对象的响应式，并利用track()和trigger()来实现依赖收集和触发更新。

Ref的设计非常巧妙，它既简单易用，又功能强大。掌握Ref的原理，可以帮助我们更好地理解Vue 3的响应式系统，并编写出更高效、更健壮的Vue应用。

希望今天的讲解对大家有所帮助。下次有机会，我们再聊聊Vue 3的其他小妖精们！拜拜！

发表回复 取消回复

发表回复取消回复