frontend-interview-playbook

Appearance

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

机制定位 ​

Vue 3 响应式系统最容易被讲成一句“Vue 2 用 defineProperty，Vue 3 用 Proxy”。这句话不能说错，但它只覆盖了代理方式，完全没有回答“状态变化为什么能转成组件更新、更新为什么不会每次都立刻执行、以及这些更新为什么有时会过多或错位”。

  • Vue 3 响应式系统最容易被讲成一句“Vue 2 用 defineProperty，Vue 3 用 Proxy”。这句话不能说错，但它只覆盖了代理方式，完全没有回答“状态变化为什么能转成组件更新、更新为什么不会每次都立刻执行、以及这些更新为什么有时会过多或错位”
  • 这道题真正有区分度的地方，在于你能不能把依赖收集、调度器、渲染 effect 和编译优化串起来
  • 如果只能复述 API，后面一旦追问 computed、watch、nextTick 或组件重渲染边界，就会迅速断层
  • Vue Core 的很多高频题，本质上都共享这套响应式底盘

参与者与职责 ​

  • 这道题真正有区分度的地方，在于你能不能把依赖收集、调度器、渲染 effect 和编译优化串起来
  • 如果只能复述 API，后面一旦追问 computed、watch、nextTick 或组件重渲染边界，就会迅速断层
  • Vue Core 的很多高频题，本质上都共享这套响应式底盘
  • @vue/reactivity 负责响应式核心能力，例如 reactive、ref、computed、effect 和依赖收集
  • @vue/runtime-core 负责组件实例、渲染 effect、scheduler、生命周期和虚拟 DOM 更新主链

关键流程 ​

  • 这道题真正有区分度的地方，在于你能不能把依赖收集、调度器、渲染 effect 和编译优化串起来
  • 如果只能复述 API，后面一旦追问 computed、watch、nextTick 或组件重渲染边界，就会迅速断层
  • Vue Core 的很多高频题，本质上都共享这套响应式底盘
  • @vue/reactivity 负责响应式核心能力，例如 reactive、ref、computed、effect 和依赖收集
  • @vue/runtime-core 负责组件实例、渲染 effect、scheduler、生命周期和虚拟 DOM 更新主链
  • @vue/runtime-dom 负责把虚拟 DOM 结果真正映射到浏览器 DOM

关键数据结构或调度关系 ​

    1. 当 effect 执行时，读取到的响应式属性会被记录
    1. 这些属性一旦变化，系统会找到依赖它们的 effect
    1. effect 不一定立刻同步执行，而是可能先进入调度器做去重和批量刷新
  • 所以 trigger() 不等于“立刻改 DOM”，而是“通知相关 effect 需要重新进入调度链路”
  • 当 effect 正在执行时，读取属性会触发 track()，把当前 key 和当前 effect 关联起来；写入属性时触发 trigger()，再从这张依赖图里把相关 effect 找出来

容易误解的边界 ​

  • 如果只能复述 API，后面一旦追问 computed、watch、nextTick 或组件重渲染边界，就会迅速断层
  • 调度器负责批量刷新，让状态变更不会每次都立刻触发完整渲染
  • Proxy 提升的是代理完整度，不是自动带来所有性能收益；真正收益还来自调度和编译优化
  • 为什么某个组件没有更新：可能不是 Vue 出错，而是你绕过了响应式边界
  • 组件边界是否切得足够细

工程后果与调试抓手 ​

  • 这道题真正有区分度的地方，在于你能不能把依赖收集、调度器、渲染 effect 和编译优化串起来
  • 如果只能复述 API，后面一旦追问 computed、watch、nextTick 或组件重渲染边界，就会迅速断层
  • Vue Core 的很多高频题，本质上都共享这套响应式底盘
  • @vue/reactivity 负责响应式核心能力，例如 reactive、ref、computed、effect 和依赖收集
  • @vue/runtime-core 负责组件实例、渲染 effect、scheduler、生命周期和虚拟 DOM 更新主链

问答设计及延伸 ​

标准回答 ​

回答 Vue 3 响应式系统：Proxy、effect、track 与 trigger 时，先说明它在 Vue Core 主链中解决的核心问题，再按参与者、流程阶段、关键数据结构和边界条件展开，最后落到性能、调试或架构后果。

追问拆解 ​

  • Vue 3 响应式系统：Proxy、effect、track 与 trigger 与“ref 与 reactive：包装语义、代理边界与模板解包”在主链中的职责分工
  • Vue 3 响应式系统：Proxy、effect、track 与 trigger 与“Vue 调度器：job queue、批量更新与 flush 顺序”在主链中的职责分工
  • Vue 3 响应式系统：Proxy、effect、track 与 trigger 与“虚拟 DOM、Block Tree 与 key：Vue 更新优化的真实基础”在主链中的职责分工
  • 规模增大后最先暴露瓶颈的阶段
  • 行为异常时优先检查的参与者、阶段与数据结构

容易失分的点 ​

  • 只会背术语，不会解释流程顺序
  • 把机制和工程结果混成一层
  • 忽略边界条件，导致结论过度绝对

项目映射 ​

  • 结合一次真实问题说明 Vue 3 响应式系统：Proxy、effect、track 与 trigger 如何帮助你定位 bug、性能问题或更新错序
  • 补充源码阅读或调试时看到的关键数据结构位置
  • 补充它和上下游模块的连接关系

相关主题 ​