vue3 ref实现

Vue3 中 ref 的实现原理

在 Vue3 中，ref 是一个核心的响应式 API，用于将一个基本类型或对象转换为响应式数据。以下是 ref 的实现原理和关键机制：

响应式包装

ref 通过 ReactiveEffect 和依赖收集机制实现响应式。当调用 ref(value) 时，Vue 会创建一个 RefImpl 类的实例，内部将值包装为响应式对象。对于基本类型（如 number、string），ref 会将其包装为对象；对于对象类型，会调用 reactive 进行深层响应式处理。

class RefImpl<T> {
  private _value: T
  private _rawValue: T
  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T) {
    this._rawValue = value
    this._value = toReactive(value)
  }

  get value() {
    trackRefValue(this) // 依赖收集
    return this._value
  }

  set value(newVal) {
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = toReactive(newVal)
      triggerRefValue(this) // 触发更新
    }
  }
}

依赖收集与触发

ref 的 get 操作会通过 trackRefValue 收集当前活跃的副作用（如组件的 render 函数或 watch 回调）。set 操作会通过 triggerRefValue 通知所有依赖的副作用重新执行，实现响应式更新。

模板自动解包

在模板中使用 ref 时，Vue 会自动解包 .value，无需手动编写。例如：

<template>
  <div>{{ count }}</div> <!-- 自动解包，无需写 count.value -->
</template>
<script setup>
const count = ref(0)
</script>

与 reactive 的区别

ref 适用于基本类型或需要直接替换整个引用的场景，而 reactive 仅适用于对象。ref 通过 .value 访问值，而 reactive 直接访问属性。

性能优化

Vue3 对 ref 的依赖收集和触发进行了优化，通过位运算和更精确的依赖关系管理，减少不必要的更新。