ref实现原理vue

ref 的实现原理（Vue 3）

Vue 3 中的 ref 是一个响应式 API，用于将一个基本类型或对象转换为响应式引用。其核心原理基于 JavaScript 的 Proxy 和 getter/setter 机制。

基本类型处理
当使用 ref 包装基本类型（如数字、字符串）时，ref 会创建一个包含 value 属性的响应式对象。例如：

const count = ref(0);

内部实现会通过 getter 和 setter 拦截对 value 的访问和修改，触发依赖收集和更新通知。

对象类型处理
如果传入的是对象，ref 会调用 reactive 方法对对象进行深层响应式转换，但仍通过 value 属性访问：

const obj = ref({ foo: 1 });
obj.value.foo = 2; // 触发响应式更新

依赖收集与触发更新

ref 通过以下机制实现响应式：

1. 依赖收集：在读取 value 时（如模板或计算属性中使用），触发 getter 并记录当前依赖（如组件的渲染函数）。
2. 触发更新：修改 value 时，触发 setter 通知所有依赖进行重新执行（如重新渲染组件）。

与 reactive 的区别

• ref 通过 .value 访问数据，适合包装基本类型或需要直接替换整个对象的情况。
• reactive 直接返回响应式代理对象，适用于复杂对象的嵌套响应式转换，无需 .value 语法。

源码简析

Vue 3 的 ref 实现简化逻辑如下：

function ref(value) {
  return {
    get value() {
      track(this, 'value'); // 依赖收集
      return value;
    },
    set value(newVal) {
      value = newVal;
      trigger(this, 'value'); // 触发更新
    }
  };
}

使用场景

• 基本类型数据（如数字、字符串）的响应式管理。
• 需要显式控制引用替换的场景（如动态组件、DOM 引用）。
• 组合式函数中返回响应式状态时。