vue的ref实现原理

Vue 的 ref 实现原理

Vue 的 ref 是一个用于响应式数据绑定的核心 API，其实现原理主要基于 Vue 的响应式系统和依赖收集机制。

基本概念

ref 用于将普通数据转换为响应式数据。无论是基本类型（如字符串、数字）还是引用类型（如对象、数组），ref 都会将其包装为一个具有 value 属性的响应式对象。

核心实现步骤

1. 创建响应式对象
   ref 内部通过 createRef 函数创建一个包含 value 属性的对象。对于基本类型，直接包装；对于对象类型，会调用 reactive 进行深层响应式处理。

   function ref(value) {
     return createRef(value, false);
   }

2. 依赖收集与触发更新
   ref 的 value 属性通过 getter 和 setter 实现依赖收集和触发更新。当访问 value 时，会触发 track 收集依赖；当修改 value 时，会触发 trigger 通知依赖更新。

   class RefImpl {
     constructor(value) {
       this._value = value;
       this.dep = new Dep();
     }
     get value() {
       track(this.dep); // 收集依赖
       return this._value;
     }
     set value(newVal) {
       if (newVal !== this._value) {
         this._value = newVal;
         trigger(this.dep); // 触发更新
       }
     }
   }

3. 与模板的绑定
   在模板中使用 ref 时，Vue 会自动解包 value 属性，无需显式调用 .value。这是通过编译阶段的特殊处理实现的。

与 reactive 的区别

• ref 适用于基本类型和对象，而 reactive 仅适用于对象。
• ref 需要通过 .value 访问数据，reactive 直接访问属性。
• ref 的实现更简单，适合单一值的响应式处理。

源码关键点

Vue 3 的 ref 实现位于 packages/reactivity/src/ref.ts，核心逻辑是通过 RefImpl 类管理响应式数据和依赖关系。