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

实例引入

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

复制 1import { ref } from 'vue'
 2
 3// 创建一个 ref
 4const count = ref(0)
 5
 6// 访问值
 7console.log(count.value) // 0
 8
 9// 修改值
10count.value++
11
12// 在模板中使用(会自动解包)
13<template>
14  <div>{{ count }}</div>
15</template>

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

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

核心数据结构

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

1. 类型系统设计

首先看看 ref 的类型定义:

复制 1interface Ref<T = any> {
 2  value: T;
 3  [RefSymbol]: true;
 4}
 5
 6
 7declare const RefSymbol: unique symbol;
 8
 9
10export declare const RawSymbol: unique symbol;

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

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

2. RefImpl 类

复制 1class RefImpl<T> {
 2  private _value: T;
 3  private _rawValue: T;
 4  public readonly __v_isRef = true;
 5
 6  
 7  public dep: Dep = new Dep();
 8
 9  constructor(value: T, public readonly __v_isShallow: boolean) {
10    this._rawValue = __v_isShallow ? value : toRaw(value);
11    this._value = __v_isShallow ? value : toReactive(value);
12  }
13
14  get value() {
15    
16    this.dep.track();
17    return this._value;
18  }
19
20  set value(newVal) {
21    
22    const useDirectValue = this.__v_isShallow || isShallow(newVal);
23    newVal = useDirectValue ? newVal : toRaw(newVal);
24
25    if (hasChanged(newVal, this._rawValue)) {
26      this._rawValue = newVal;
27      this._value = useDirectValue ? newVal : toReactive(newVal);
28      
29      this.dep.trigger();
30    }
31  }
32}

关键属性和方法:

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

3. ref 工厂函数

复制 1export function ref<T>(value: T): Ref<UnwrapRef<T>> {
 2  return createRef(value, false);
 3}
 4
 5function createRef(rawValue: unknown, shallow: boolean) {
 6  
 7  if (isRef(rawValue)) {
 8    return rawValue;
 9  }
10  
11  return new RefImpl(rawValue, shallow);
12}

4. 自动解包机制

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

复制 1<template>
 2  <div>{{ count }}</div> 
 3</template>;
 4
 5
 6const count = ref(0);
 7const state = reactive({ count });
 8console.log(state.count); 
 9
10
11const arr = reactive([ref(0)]);
12console.log(arr[0].value); 

解包的实现原理:

复制 1export function isRef<T>(r: Ref<T> | unknown): r is Ref<T> {
 2  return !!(r && (r as any)[ReactiveFlags.IS_REF] === true);
 3}
 4
 5
 6export function unref<T>(ref: T | Ref<T>): T {
 7  return isRef(ref) ? ref.value : ref;
 8}

5. shallowRef 的实现

复制 1export function shallowRef<T>(value: T): ShallowRef<T> {
 2  return createRef(value, true); 
 3}

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 的实现原理。