frontend-interview-playbook

Appearance

Vue 3 响应式系统：Proxy、effect、track 与 trigger ​

主题边界 ​

  • Vue 3 响应式系统不是一句“Vue 2 用 defineProperty，Vue 3 用 Proxy”就能讲完。
  • 真正核心是 Monorepo 下的包职责拆分、依赖收集图和调度器如何把状态变化转成组件更新。

机制与流程 ​

  • @vue/reactivity 负责响应式，@vue/runtime-core 负责组件实例、scheduler 和渲染主链，@vue/runtime-dom 负责 DOM 平台适配，@vue/compiler-* 负责模板编译。
  • 响应式内部以 targetMap -> depsMap -> dep(Set<ReactiveEffect>) 组织依赖；读取时 track() 收集当前 activeEffect，写入时 trigger() 找到依赖集合并触发调度。
  • 组件渲染 effect 不会每次同步直跑，而是交给 scheduler 合并、去重、排序后再刷新。

关键差异 ​

  • Vue 2 的 defineProperty 很难完整覆盖属性新增、删除、数组索引和集合类型；Vue 3 的 Proxy + Reflect 覆盖更完整。
  • Vue 3 的性能提升不只在代理能力，还来自编译器与运行时分离、Block Tree、PatchFlags 和更细的组件更新边界。

边界条件 ​

  • 响应式层只回答“谁依赖了谁”，不直接决定 DOM 如何 patch；patch 逻辑仍在 runtime 层。
  • Proxy 不是性能银弹，真正收益来自依赖图、调度批处理和编译优化共同作用。

工程落点 ​

  • 理解 @vue/reactivity 和 @vue/runtime-core 的边界后，源码阅读、性能分析和副作用治理都会更清晰。
  • 这道题如果能把 Monorepo、依赖图和 scheduler 串起来，已经明显高于 API 背诵层。

相关主题 ​