vue3源码解析：ref原理

今天我们来看看 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;
}


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) {
  
  if (isRef(rawValue)) {
    return rawValue;
  }
  
  return new RefImpl(rawValue, shallow);
}

#4. 自动解包机制

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

复制<template>
  <div>{{ count }}</div> 
</template>;


const count = ref(0);
const state = reactive({ count });
console.log(state.count); 


const arr = reactive([ref(0)]);
console.log(arr[0].value); 

解包的实现原理:

复制export function isRef<T>(r: Ref<T> | unknown): r is Ref<T> {
  return !!(r && (r as any)[ReactiveFlags.IS_REF] === true);
}


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