Vue核心原理：响应式、虚拟DOM、diff
本章核心：面试中超过80%的高频问题围绕响应式实现、虚拟DOM与diff算法展开。你需要掌握Object.defineProperty vs Proxy、批量异步更新、同层比较+key优化等关键差异，并能用“读时收集、写时通知”一句话概括响应式本质。
响应式与虚拟DOM核心对比
| 维度 | Vue2 | Vue3 |
|---|---|---|
| 响应式实现 | Object.defineProperty（递归劫持） | Proxy（惰性代理） |
| 依赖收集 | Watcher + Dep（每个属性一个Dep） | WeakMap + targetMap（对象级依赖） |
| 数组处理 | 重写7个数组方法，需$set | Proxy天然代理数组，支持索引 |
| 虚拟DOM diff | 全量patch，同层比较，双端比较 | 同层比较 + patchFlag（静态标记） |
| 更新粒度 | 组件级（组件内所有子元素重新渲染） | 块级（Block Tree + 动态节点追踪） |
面试问答卡片
📌 问题1：请详细描述Vue2响应式原理的实现过程。
🎯 面试官考察点：
- 是否理解Object.defineProperty的劫持机制
- 依赖收集与派发更新的完整链路
- 对数组和对象的特殊处理是否清楚
- 能否对比Vue3的Proxy优势
🧠 回答框架：
- 核心：数据劫持 + 依赖收集 + 派发更新 + 异步批量
- 初始化时递归遍历data，对每个属性用Object.defineProperty定义getter/setter
- getter中通过Dep.depend()进行依赖收集（当前Watcher入栈）
- setter中触发Dep.notify()，通知所有Watcher执行更新
- 通过nextTick将更新合并到微任务队列，避免重复渲染
📝 示例回答：
“Vue2响应式先通过Observer递归劫持data所有属性，getter时依赖收集（当前Watcher入Dep），setter时通知所有Watcher。数组通过重写7个方法实现响应式，对象新增属性需$set。更新通过nextTick异步批量执行，避免重复渲染。”
❓ 可能追问：
- Vue2为什么不能直接监听数组索引变化？
- 依赖收集时Watcher和Dep的关系是怎样的？
- Vue3的Proxy如何解决Vue2的数组和新增属性问题？
⚠️ 避坑提醒：
❌ 不要只背代码流程，一定要讲出“读时收集、写时通知”的设计思想。❌ 不要忘记数组特殊处理，这是Vue2的经典坑点。❌ 不要遗漏nextTick异步更新机制，否则会被认为只懂皮毛。
📌 问题2：Vue虚拟DOM和diff算法是如何工作的？
🎯 面试官考察点：
- 是否理解虚拟DOM的本质（JS对象映射）
- diff算法的核心策略：同层比较、key优化、双端指针
- Vue3的patchFlag优化是否了解
- 能否结合场景分析性能
🧠 回答框架：
- 虚拟DOM是用JS对象模拟真实DOM树的轻量表示
- diff算法在同层级进行（跨层不比较，降低复杂度到O(n)）
- 核心三要素：tag不同直接替换、同tag对比属性、有key优化复用
- Vue2采用双端比较（4个指针），Vue3增加patchFlag标记动态节点
- 最终将差异patch到真实DOM
📝 示例回答：
“虚拟DOM是真实DOM的JS对象映射，diff采用同层比较策略，降低复杂度。Vue2双端指针对比，Vue3引入patchFlag静态标记跳过静态节点。key帮助识别可复用节点，避免不必要的销毁重建。”
❓ 可能追问：
- 为什么Vue3的diff比Vue2快？具体优化了哪些？
- 没有key会发生什么问题？举例说明。
- Vue的diff和React的Fiber diff有什么区别？
⚠️ 避坑提醒：
❌ 不要只说“diff比较两棵树”，要具体到策略。❌ 不要混淆Vue2和Vue3的diff实现。❌ 强调key的重要性时，避免背公式，最好给出列表插入数据后的对比示例。
📌 问题3：Vue3响应式与Vue2有什么核心区别？为什么用Proxy？
🎯 面试官考察点：
- 是否具备框架演进的理解，而非死记新写法
- Proxy与Object.defineProperty的底层差异
- 对响应式性能提升（惰性监听、数组支持）的认识
- 能否结合Composition API谈响应式封装
🧠 回答框架：
- 根本差异：Proxy代理整个对象，而非递归遍历属性
- 优点：支持数组索引、新增属性自动响应、无需$set/$delete
- 性能：Proxy惰性初始化，只代理访问到的属性，而非递归全量
- 依赖收集机制改为WeakMap + targetMap，对象级管理
- Vue3还引入ref/reactive统一响应式API，可脱离组件使用
📝 示例回答：
“Vue3用Proxy替代defineProperty，直接代理整个对象，监听数组索引和新增属性无需额外处理。依赖收集改用WeakMap+targetMap结构，惰性代理提升首次渲染性能。ref/reactive提供更灵活的响应式能力，可在JS中独立使用。”
❓ 可能追问：
- Proxy的兼容性问题如何解决的？（Vue3支持IE？）
- ref和reactive的底层实现差异是什么？
- Vue3的响应式在编译阶段做了哪些优化？
⚠️ 避坑提醒：
❌ 不要只说“Proxy更好”，要对比具体场景。❌ 不要忽略Vue3的编译优化（如静态提升、patchFlag）与响应式的关系。❌ 提到IE兼容时，应明确Vue3不支持IE11，这是设计取舍。