·更新于 2026年4月21日· 70 次浏览 Vue 3前端框架
Vue 3 响应式：Proxy、依赖收集与调度
`reactive` / `ref` 如何建立依赖图；`track`、`trigger` 与 `effect` 更新顺序；`computed` 缓存与 `watch` 的 flush 时机。
作者
ZHOU YI
Vue 3 用 Proxy 拦截 get/set，在 get 时 track 收集当前活跃的 effect，在 set 时 trigger 通知相关 effect 重新执行。
与 Vue 2 的差异
- 数组索引、对象增删属性可被代理，无需
$set - 使用
WeakMap等结构存储 target → key → dep 映射，减少内存泄漏风险
ts
const state = reactive({ count: 0 })
watchEffect(() => {
console.log(state.count)
})
state.count++ // effect 再跑批量更新：同一 tick 内多次修改可能合并调度，减少 DOM 写入。理解 nextTick 有助于与第三方库或动画帧对齐。