---
url: https://www.lingpapl.cn/posts/2026-07-04-vue3-reactivity-analysis.md
description: 从依赖收集、派发更新和 Proxy 代理三个角度，梳理 Vue3 响应式系统的核心实现思路。
---

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

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

## 核心概念

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

## 简化流程

```ts
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` 的结构。