Vue 3.4 响应式系统核心：ref 与 computed 实现解析

1. 从零实现 Vue 3.4 响应式系统核心

作为前端开发者，我们每天都在使用 Vue 的响应式系统，但你真的了解它的工作原理吗？今天我将带大家深入 Vue 3.4.23 源码，手把手实现其中最核心的 ref 和 computed 功能。这不是简单的 API 讲解，而是从零开始的完整实现过程，包含你可能从未注意过的细节优化。

2. ref 的实现原理与细节

2.1 ref 的基本工作原理

ref 是 Vue 3 中最基础的响应式 API 之一，它的核心功能是将一个普通值转换为响应式对象。让我们先看一个典型的使用示例：

javascript复制const num = ref(10)

effect(() => {
  console.log(num.value)
})

num.value = 20 // 触发 effect
num.value = 20 // 不触发（值未变化）

这个简单的例子揭示了 ref 的几个关键特性：

1. 通过 .value 访问和修改值
2. 能够被 effect 跟踪依赖
3. 只有值真正变化时才会触发更新

2.2 RefImpl 类的核心实现

让我们深入 ref 的内部实现。在源码中，ref 的核心是 RefImpl 类：

typescript复制class RefImpl<T> {
  readonly __v_isRef = true
  _rawValue: T
  _value: T
  dep?: Dep = undefined

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

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newValue: T) {
    if (newValue !== this._rawValue) {
      this._rawValue = newValue
      this._value = toReactive(newValue)
      triggerRefValue(this)
    }
  }
}

这个类有几个关键设计点：

1. _rawValue 存储原始值用于比较
2. _value 存储经过 reactive 处理的值（如果是对象）
3. dep 用于存储依赖的 effect
4. 通过 getter/setter 拦截 value 的访问和修改

注意：toReactive 函数会判断值是否为对象，如果是则用 reactive 包裹，这使得 ref 也能处理对象类型的深层响应式。

2.3 依赖收集与触发机制

ref 的响应式能力依赖于两个核心函数：

typescript复制function trackRefValue(ref: RefBase<any>) {
  if (activeEffect) {
    ref.dep ??= c