第三章：Vue核心原理与源码分析（响应式、虚拟DOM、模板编译、生命周期源码级理解）
本章聚焦Vue团队负责人必须掌握的四大源码级原理：响应式系统、虚拟DOM、模板编译、生命周期。面试中不仅考查“怎么用”，更要求你能从源码角度讲清“为什么这样实现”“性能瓶颈在哪”“如何优化”。以下结构化问答卡片将帮助你建立体系化回答框架。
📌 问答卡片一：响应式系统原理
| 面试问题 | 请从源码角度说明Vue 2和Vue 3响应式系统的区别，以及依赖收集和派发更新的实现细节。 |
| 考察点 | ✅ 是否理解Object.defineProperty的局限（数组、新增属性） ✅ 是否了解Proxy的优势与兼容性考虑 ✅ 是否能讲清Dep、Watcher、Scheduler三者协作关系 |
| 回答框架 | 1. 平台差异：Vue2使用Object.defineProperty，只能劫持已有属性；Vue3使用Proxy，可劫持整个对象。 2. 依赖收集：在getter中通过dep.depend()将当前Watcher加入依赖集。 3. 派发更新：setter中触发dep.notify()，通过nextTick和队列机制异步更新。 4. 数组处理：Vue2重写7个数组方法；Vue3原生支持数组下标及length变化。 |
| 示例回答 | Vue2通过Object.defineProperty递归劫持data，对数组通过重写方法处理；Vue3改用Proxy直接代理对象，支持动态属性、数组索引、Map/Set。依赖收集阶段，getter调用dep.depend()将当前Watcher关联Watcher；更新时setter调用dep.notify()，由调度器（flushSchedulerQueue）统一异步批量执行watcher.run()。 |
| 可能追问 | • Vue2如何处理深层嵌套对象的响应式？ • Vue3的reactive和ref在源码上如何区分？ • 响应式数据在渲染过程中为什么会触发多次getter？如何优化？ |
| 避坑提醒 | ⚠️ 避免只说“Vue3用Proxy性能更好”，必须解释Proxy的懒递归和响应式标志位（__v_raw, __v_isReactive）的设计；答“异步更新队列”时需提及nextTick源码位置和microtask机制。 |
📌 问答卡片二：虚拟DOM与diff算法
| 面试问题 | 请详细描述Vue中虚拟DOM的patch过程，包括sameVnode判断、key的作用、以及diff算法的优化策略。 |
| 考察点 | ✅ 是否真正理解虚拟DOM减少真实DOM操作的核心逻辑 ✅ 是否知道patchVnode内的属性更新、子节点递归对比 ✅ 是否能对比React的diff策略差异 |
| 回答框架 | 1. 入口：Vue.prototype._update调用patch(oldVnode, vnode)。 2. sameVnode：比较key、tag、isComment、data是否相同，决定复用还是销毁创建。 3. patchVnode：更新属性、处理文本、递归对比子节点（updateChildren）。 4. updateChildren：双端diff策略，4个指针（oldStartIdx, oldEndIdx, newStartIdx, newEndIdx），最大化复用。 5. key作用：唯一标识，避免不必要的DOM移动和创建。 |
| 示例回答 | patch先通过sameVnode判断key+tag是否一致，若不一致直接替换整个元素；相同则执行patchVnode：先更新静态属性（class, style, attrs），再对比子节点。updateChildren采用头尾指针移动，当发现新头与旧头相同则移动指针，否则通过key映射找到可复用节点，最后删除多余或新增。Vue2双端指针相比React的单一从左向右算法更高效。 |
| 可能追问 | • Vue3的diff优化（patchFlags、Block Tree）如何减少对比？ • 为什么v-for中不推荐使用index作为key？ • 静态提升（hoistStatic）如何影响VDOM创建？ |
| 避坑提醒 | ⚠️ 不要只背口诀“头尾交叉对比”，要讲清楚指针移动的终止条件（while循环结束至少有一个数组遍历完）。提及“key用于就地复用”时需说明：key必须在兄弟节点中唯一，并且Vue不会自动检测动态key变更。 |
📌 问答卡片三：模板编译与生命周期源码
| 面试问题 | Vue模板编译经历了哪几个阶段？生命周期钩子（如created、mounted）的源码调用时机分别对应哪个阶段？ |
| 考察点 | ✅ 是否理解compiler与runtime的分工 ✅ 是否知道生命周期在源码中的实现方式（callHook） ✅ 是否了解编译后的render函数如何与响应式、VDOM联动 |
| 回答框架 | 1. 编译三阶段：parse（生成AST）→ optimize（标记静态节点）→ generate（生成render函数字符串）。 2. 生命周期执行： • beforeCreate：在initState之前，无法访问data/computed。 • created：initState完成，可访问响应式数据，但未挂载DOM。 • beforeMount：在DOM挂载之前，生成vnode。 • mounted：$el 替换完成，执行mounted钩子。 • beforeUpdate / updated：由响应式依赖触发，在scheduler中调用。 |
| 示例回答 | 模板编译流程：parse将template转为AST，optimize标记静态节点（静态提升），generate生成render函数字符串（Vue3中为对象描述+createBlock）。生命周期在源码中统一通过callHook(vm, 'hook:created')调用，执行顺序由Vue.prototype._init内的mergeOptions和挂载流程控制。created在initState后立即调用，mounted在patch完成后触发$vnode的钩子。 |
| 可能追问 | • Vue3中setup执行在beforeCreate之前还是之后？为什么？ • created和beforeMount之间发生了什么关键操作？ • 如果父组件和子组件都有mounted钩子，执行顺序如何？ |
| 避坑提醒 | ⚠️ 避免混淆“runtime-only”和“runtime+compiler”的区别——面试高频。强调Vue3中编译优化（patchFlags、缓存事件）使编译产物更小更快。生命周期顺序说清楚：父beforeCreate → 父created → 父beforeMount → 子beforeCreate → 子created → 子beforeMount → 子mounted → 父mounted。 |
📌 生命周期源码入口对比（Vue2 vs Vue3）
| 生命周期 | Vue2 源码位置 | Vue3 源码位置 | 关键触发函数 |
|---|---|---|---|
| beforeCreate | src/core/instance/init.js callHook(vm, 'beforeCreate') | packages/runtime-core/src/componentOptions.ts applyOptions中的setup后 | callHookWithHook |
| created | initState之后, 即callHook(vm, 'created') | setup执行完成后, 在mountComponent之前 | invokeDirectHooks / trigger |
| beforeMount | src/core/instance/lifecycle.js mountComponent中 | packages/runtime-core/src/renderer.ts 在createApp.mount后 | callHook('bm') |
| mounted | patch完成后, insert钩子中触发 | afterMount钩子, 组件挂载后触发 | invokeArrayFns |
💡 加分技巧：在回答任何源码问题时，主动提及Vue3相较于Vue2的优化点（如静态提升、patchFlags、Block Tree），同时结合性能指标（VDOM创建减少30%~50%），能体现团队负责人的技术视野。
⚠️ 常见失分点：只背诵源码文件名而不理解调用时机；混淆compiler和runtime的职责；忽略Vue3中Composition API生命周期与Options API生命周期的统一处理方式。