分析vue3源码19（ref的实现）

eason_fan
227 阅读4分钟

Vue 的 ref 实现分析

前言

上两节我们分析了 watch 和 watchEffect 的实现，今天我们来看看 ref 的具体实现。ref 是 Vue 3 中最基础的响应式 API 之一，它可以将任何值转换为响应式对象。

实例引入

首先通过一个例子来看看 ref 的用法:

import { ref } from 'vue'

// 创建一个 ref
const count = ref(0)

// 访问值
console.log(count.value) // 0

// 修改值
count.value++

// 在模板中使用(会自动解包)
<template>
  <div>{{ count }}</div>
</template>

这个例子展示了 ref 的基本使用:

  1. 通过 ref() 创建响应式引用
  2. 通过 .value 访问和修改值
  3. 在模板中会自动解包,不需要 .value

核心数据结构

下面通过源码来看看 ref 的核心数据结构和方法:

1. 类型系统设计

首先看看 ref 的类型定义:

interface Ref<T = any> {
  value: T;
  [RefSymbol]: true;
}

// 用于区分普通对象和 ref
declare const RefSymbol: unique symbol;

// 用于标记原始值
export declare const RawSymbol: unique symbol;

Vue 通过巧妙的类型设计实现了:

  1. 通过 RefSymbol 在类型层面区分 ref 和普通对象
  2. 支持泛型,保证类型安全
  3. 通过 RawSymbol 标记原始值,避免重复代理

2. RefImpl 类

class RefImpl<T> {
  private _value: T;
  private _rawValue: T;
  public readonly __v_isRef = true;

  // 存储依赖的容器
  public dep: Dep = new Dep();

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

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

  set value(newVal) {
    // 获取原始值进行比较
    const useDirectValue = this.__v_isShallow || isShallow(newVal);
    newVal = useDirectValue ? newVal : toRaw(newVal);

    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal;
      this._value = useDirectValue ? newVal : toReactive(newVal);
      // 触发更新
      this.dep.trigger();
    }
  }
}

关键属性和方法:

  1. _value: 存储响应式值
  2. _rawValue: 存储原始值
  3. __v_isRef: 标识这是一个 ref 对象
  4. dep: 存储依赖的容器
  5. get/set value: 拦截值的访问和修改

3. ref 工厂函数

export function ref<T>(value: T): Ref<UnwrapRef<T>> {
  return createRef(value, false);
}

function createRef(rawValue: unknown, shallow: boolean) {
  // 如果已经是 ref,直接返回
  if (isRef(rawValue)) {
    return rawValue;
  }
  // 创建 RefImpl 实例
  return new RefImpl(rawValue, shallow);
}

4. 自动解包机制

Vue 提供了多种方式实现 ref 的自动解包:

// 1. 在模板中自动解包
<template>
  <div>{{ count }}</div> // 不需要 .value
</template>;

// 2. reactive 对象中的 ref 自动解包
const count = ref(0);
const state = reactive({ count });
console.log(state.count); // 直接访问值,不需要 .value

// 3. 数组/集合中的 ref 不会解包
const arr = reactive([ref(0)]);
console.log(arr[0].value); // 需要 .value

解包的实现原理:

// 检查是否是 ref
export function isRef<T>(r: Ref<T> | unknown): r is Ref<T> {
  return !!(r && (r as any)[ReactiveFlags.IS_REF] === true);
}

// 解包 ref
export function unref<T>(ref: T | Ref<T>): T {
  return isRef(ref) ? ref.value : ref;
}

5. shallowRef 的实现

export function shallowRef<T>(value: T): ShallowRef<T> {
  return createRef(value, true); // 第二个参数表示是否是浅层响应
}

shallowRef 与普通 ref 的区别:

  1. 不会递归转换嵌套对象
  2. 只有 .value 的赋值会触发更新
  3. 适合大型数据结构的性能优化

调用流程

下面我们通过引入的例子，将 ref 的调用流程串联起来:

1. 创建阶段

当执行 const count = ref(0) 时:

  1. 调用 ref() 函数
  2. 通过 createRef() 创建 RefImpl 实例
  3. 在构造函数中:
    • 保存原始值到 _rawValue
    • 转换为响应式值保存到 _value

2. 访问阶段

当访问 count.value 时:

  1. 触发 get value()
  2. 调用 dep.track() 收集当前依赖
  3. 返回 _value

3. 修改阶段

当执行 count.value++ 时:

  1. 触发 set value()
  2. 对比新旧值是否变化
  3. 如果有变化:
    • 更新 _rawValue 和 _value
    • 调用 dep.trigger() 触发更新

4. 模板中的自动解包

在模板中使用时(如 {{ count }})：

  1. 模板编译时检测到 ref
  2. 自动生成 .value 的访问代码
  3. 实现模板中的自动解包

总结

通过分析可以看到,ref 的实现主要包含以下几个关键点:

  1. 通过 RefImpl 类封装值,提供统一的访问接口
  2. 使用 _value 和 _rawValue 分别存储响应式值和原始值
  3. 通过 getter/setter 拦截 .value 的访问
  4. 利用 dep 实现依赖收集和触发更新
  5. 支持自动解包,提升开发体验
  6. 提供 shallowRef 优化性能
  7. 完善的类型系统设计
  8. 灵活的自动解包机制

这种设计既保证了响应式的正常工作，又提供了良好的开发体验。在下一节中，我们将分析与 ref 密切相关的另一个响应式 API —— reactive 的实现原理。

avatar
文章
阅读
粉丝