前端与全栈开发面试 · 第 55 题

1. Vue 2:初始化时用 Object.defineProperty 递归遍历 data,把每个属性改写成 getter / setter。getter 中由 Dep 收集 Watcher,setter 中通知更新。数组通过重写 push、splice 等 7 个方法来拦截。
2. Vue 2 的局限:新增或删除属性、按下标修改数组、修改 length 都侦测不到,需要用 Vue.set / Vue.delete;初始化时要深度递归,大对象启动慢;不支持 Map、Set。
3. Vue 3:用 Proxy 代理整个对象,拦截 get、set、has、deleteProperty、ownKeys 等操作;访问到嵌套对象时才进行代理(惰性);支持 Map、Set、WeakMap。
4. 依赖收集:track 时记录「目标对象 → 键 → 副作用集合」的映射,trigger 时找到对应的副作用重新执行;effect、computed、watch 都建立在这套机制之上。
5. 其他改进:ref 和 reactive 可以脱离组件单独使用(Composition API);编译时的静态提升和 PatchFlag 让更新时只比较动态部分。
6. 代价:Proxy 无法 polyfill,所以 Vue 3 不支持 IE11。

defineProperty 与 Proxy 的能力差异是核心,再补充依赖收集的数据结构。