从源码的角度去分析,为什么Vue3中的ref为何要用.value进行值的调用

吴世燅

于 2024-09-03 14:30:59 发布

阅读量805

点赞数 21

文章标签： vue.js javascript 前端 vue typescript

本文链接：https://blog.csdn.net/weixin_51522175/article/details/141860828

版权

要从源码角度分析 Vue 3 中 ref 为什么需要通过 .value 来访问和修改值，关键在于 Vue 3 响应式系统的设计和实现。Vue 3 使用 Proxy 对象和 ES6 的 Reflect API 实现响应式特性，ref 是其中一个基础 API，用来处理原始数据类型和复杂类型的响应式能力。

1. `ref` 是对响应式对象的封装

在 Vue 3 的实现中，ref 是用于包装 原始类型（如 number、string、boolean 等）或者对象的封装。
由于原始类型不能直接被 Proxy 代理（Proxy 只能作用于对象），Vue 设计了 ref 来处理原始类型的响应式，通过 .value 属性访问其封装的值。
ref 的内部本质上是一个对象，只有一个 .value 属性存储真正的值。对 .value 的访问和修改操作，都会被 Vue 内部的响应式系统捕捉，从而实现响应式更新。

2. Vue 3 中 `ref` 的核心实现

在 Vue 3 的源码中，ref 的核心逻辑位于 @vue/reactivity 包中。ref 的创建通过 createRef 函数完成，它返回一个包含 .value 属性的对象。Vue 通过对 .value 属性的 getter 和 setter 进行拦截，从而实现响应式的依赖收集和触发更新。

`ref` 的源码实现：

export function ref(value?: unknown) {
  return createRef(value, false);
}

function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue;
  }
  return new RefImpl(rawValue, shallow);
}

class RefImpl<T> {
  private _value: T;
  private _rawValue: T;

  public readonly __v_isRef = true;

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = value;
    this._value = __v_isShallow ? value : toReactive(value);
  }

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

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

3. `value` 是响应式系统中的依赖收集和触发更新的关键

在 RefImpl 类中，get value() 方法是一个 getter，它在访问 ref.value 时会调用 trackRefValue(this)，这个函数负责在依赖中注册当前的 ref，从而实现 依赖收集。
当 set value(newVal) 被调用时，triggerRefValue(this) 会被触发，用来通知依赖这个 ref 的组件或函数进行更新。

这种基于 getter 和 setter 的机制是 Vue 3 响应式系统的核心，通过 ref 的 .value 属性，Vue 能够精确地追踪数据的变化，并自动更新视图。

4. 原始类型与对象类型的区别

Vue 3 对象类型的响应式使用 reactive，它内部通过 Proxy 直接对对象的属性进行代理。
但是对于 原始类型（如 number、string），它们并不是对象，无法通过 Proxy 实现响应式，所以需要通过 ref 来封装。
ref 的 .value 设计是为了统一对各种类型（包括原始类型和对象）的操作方式，确保响应式系统对不同类型数据的追踪和更新。

5. 响应式追踪机制（依赖收集）

trackRefValue(this) 是依赖收集的关键，它在 get value() 时被调用，目的是让依赖该 ref 值的副作用（例如视图更新函数）记录当前依赖的 ref。
当 .value 被修改时，triggerRefValue(this) 会触发依赖该值的所有副作用重新运行，以此实现响应式更新。

6. 为什么不直接用 `ref` 本身来存取值？

使用 .value 而不直接使用 ref 本身访问值，主要是为了区分响应式的引用和非响应式的普通变量。
如果直接使用 ref 本身访问值，而不通过 .value，Vue 无法清楚地区分什么时候应该进行响应式追踪和触发更新。这种分离设计能确保 Vue 内部可以对所有类型的数据进行统一处理。