模板到页面经历什么？Vue2 diff 怎么理解？
先理解原理和示例，再练习完整口述与追问。
回答要点
模板编译为渲染函数，执行后产生虚拟节点；更新时比较并应用到真实 DOM。能说明同类型复用、子节点比较、key 和组件状态的联系。虚拟 DOM 不是永远比手工 DOM 快。
原理拆解
模板先编译为渲染函数，执行渲染函数读取响应式数据并生成 VNode，首次 patch 创建真实 DOM；后续依赖变化使渲染再次执行，再比较新旧 VNode 更新。Vue2 常见核心策略按同层节点处理，节点类型与 key 等决定能否复用；列表可使用双端比较等路径减少移动。它是基于常见界面结构的启发式算法，并不求任意树之间全局最小编辑距离。
示例与推演
模板 <p>{{name}}</p> 的响应式系统知道组件依赖 name；name 从 A 变 B 后重跑渲染，patch 发现仍是 p 元素，只更新相应文本，不必重建整页。列表插入时 key 帮助识别原有记录，事件、组件状态和 DOM 才可能正确复用。调度队列负责批量合并更新，不能把批处理全部归功于 diff。
易错点
虚拟 DOM 不保证比手写精准 DOM 操作更快，它提供声明式更新和可维护性等价值。不要把 Vue3 的最长递增子序列优化直接当成 Vue2 同一段实现。
参考回答可直接练习口述
Vue2 把模板编译成 render 函数；render 读取响应式数据并产生虚拟节点，挂载时创建 DOM，更新时用 patch 比较新旧节点并做必要修改。常见同类型节点尽量复用，子节点比较会结合 key 和首尾指针处理移动、插入、删除。虚拟 DOM 的价值是声明式与跨平台抽象，并不保证每个操作都比精准手写 DOM 快。
面试官可能继续问追问与完整解答展开收起
追问
静态内容如何减少重复工作？Vue2 经典子节点比较和 Vue3 的优化有何不同？Vue2 官方 API 索引
追问回答
静态节点可在编译阶段识别并减少重复创建或比较。Vue2 的经典双端比较从首尾组合寻找可复用节点；Vue3 keyed diff 在前后同步后处理剩余部分，并可用最长递增子序列减少移动，编译器还提供动态标记辅助缩小更新范围。