3. Vue核心原理与响应式系统：数据劫持、依赖收集、虚拟DOM、diff算法

• 是否理解Object.defineProperty与Proxy的本质差异
• 是否清楚Vue2的边界情况（数组索引、属性增删）及处理方案
• 能否从源码角度分析懒响应式与递归响应的性能差异

1. 起点：Vue2使用Object.defineProperty递归遍历对象属性
2. 局限：无法监听数组索引变化、属性新增/删除，需$set/$delete
3. 升级：Vue3使用Proxy代理整个对象，配合Reflect完成拦截
4. 优势：天然支持数组操作和属性增删，懒响应式按需劫持
5. 收尾：性能更优，内存开销更小，TypeScript类型推导更好

Vue2通过Object.defineProperty递归遍历对象属性实现响应式，无法监听数组索引变化和属性新增/删除，需额外调用$set/$delete处理。Vue3使用Proxy代理整个对象，配合Reflect完成拦截，天然支持数组索引、属性增删，且通过懒响应式按需劫持，初始化更快、内存更优。同时Vue3还引入了Composition API，让逻辑复用更灵活。

• Proxy为什么能监听数组？
• Reflect在响应式中的作用是什么？
• Vue2如何处理数组变异方法？
• Vue3的懒响应式具体是怎么实现的？

不要只说"Proxy比defineProperty好"，要具体说明"好在哪里"。面试官期待你列出至少2个Vue2的边界情况（数组索引、属性新增/删除）以及对应的解决方案（$set、重写数组方法）。同时避免误以为Vue3完全没有响应式边界——Proxy无法代理基本类型值，ref 的存在就是为了解决这个问题。

• 是否理解Dep、Watcher、Observer三者的协作关系
• 能否说清getter/setter在依赖收集与派发更新中的角色
• 是否知道Dep.target的全局唯一性及其作用

1. 创建Watcher：组件挂载时创建渲染Watcher
2. 触发getter：执行render函数，访问数据触发getter
3. 收集依赖：getter中调用dep.depend()，Watcher入队subs
4. 派发更新：数据变更触发setter，调用dep.notify()
5. 重新渲染：Watcher重新执行render，生成新虚拟DOM

组件挂载时创建渲染Watcher，执行render函数触发数据getter，getter中通过dep.depend()将当前Watcher收集到Dep的subs队列。数据变更时setter调用dep.notify()，遍历subs队列触发Watcher重新执行render，生成新虚拟DOM并通过diff算法更新视图。Dep.target全局唯一，保证同一时刻只有一个Watcher在收集依赖。

• computed和watch的Watcher与渲染Watcher有何区别？
• 如何避免依赖重复收集？
• Dep.target的设计目的是什么？
• Vue3中的依赖收集机制有哪些变化？

区分"依赖收集"和"派发更新"是两个独立阶段：收集发生在getter中，更新发生在setter中。不要混淆Dep.target与普通属性——Dep.target是全局栈顶，用于标记当前正在计算的Watcher。另注意Vue2和Vue3的依赖收集核心机制相同（Dep+Watcher），差异主要在数据劫持方式上。

• 是否理解虚拟DOM的设计初衷（减少真实DOM操作）
• 是否熟悉sameVnode判断逻辑及patchVnode的处理流程
• 是否了解updateChildren的双端比较策略及key的作用

1. 核心思想：虚拟DOM用JS对象描述真实DOM，通过diff最小化操作
2. sameVnode：判断key和tag是否相同，决定节点是否可复用
3. patchVnode：更新属性、处理文本、递归对比子节点
4. updateChildren：双端比较，四种匹配（头头/尾尾/头尾/尾头）
5. key优化：标识节点身份，避免跨层级复用混乱

虚拟DOM用JS对象描述真实DOM，通过diff算法计算最小变更量。Vue的diff核心：先通过sameVnode比较key和tag判断是否可复用；patchVnode更新属性和子节点；updateChildren采用双端比较，依次尝试头头、尾尾、头尾、尾头匹配，配合key实现节点复用。最终仅对差异部分执行真实DOM操作，避免全量重建。

• 双端比较的四种匹配方式具体怎么工作？
• 为什么不要用index作为key？
• patchVnode中如何处理文本节点与子节点？
• Vue3的diff算法相比Vue2有哪些优化？

不要背诵"同层比较、深度优先"等口诀式回答，要结合具体场景说明。面试官期待你理解key的本质作用是"标识节点身份"而非"优化性能"——用index作为key在列表倒序等场景会导致复用错乱。同时注意区分Vue2和Vue3的diff差异：Vue3增加了静态标记（patchFlag）和动态绑定，跳过静态节点对比。