Vue3 响应式原理：从 ref、reactive 到 effect

Vue3 响应式系统的核心目标是：当状态被读取时收集依赖，当状态被修改时通知依赖重新执行。

核心概念

• reactive：使用 Proxy 代理对象，拦截 get 和 set。
• ref：用于包装基本类型或对象，通过 .value 触发依赖收集和更新。
• effect：副作用函数，记录状态和视图更新之间的关系。

简化流程

type Effect = () => void

let activeEffect: Effect | null = null
const bucket = new WeakMap<object, Map<PropertyKey, Set<Effect>>>()

function track(target: object, key: PropertyKey) {
  if (!activeEffect) return
  let depsMap = bucket.get(target)
  if (!depsMap) bucket.set(target, (depsMap = new Map()))
  let deps = depsMap.get(key)
  if (!deps) depsMap.set(key, (deps = new Set()))
  deps.add(activeEffect)
}

function trigger(target: object, key: PropertyKey) {
  const depsMap = bucket.get(target)
  const deps = depsMap?.get(key)
  deps?.forEach((effect) => effect())
}

面试延伸

面试中可以重点讲三个问题：

1. Vue3 为什么使用 Proxy 替代 Vue2 的 Object.defineProperty。
2. ref 和 reactive 分别适合什么场景。
3. 为什么依赖容器使用 WeakMap -> Map -> Set 的结构。