一、响应式原理（核心考点）
核心机制：
Vue 2：
Object.defineProperty劫持对象属性，通过Dep（依赖收集器）和Watcher（观察者）实现依赖收集与更新派发。缺陷：无法监听数组索引/长度变化、对象新增属性（需
Vue.set）。
Vue 3：
Proxy劫持整个对象，解决 Vue 2 缺陷，支持 Map/Set 等新类型。
关键点：依赖收集：组件渲染时触发
getter，将Watcher添加到Dep。派发更新：数据变化触发
setter，Dep通知所有Watcher更新视图。
二、虚拟 DOM 与 Diff 算法（性能关键）
流程：
模板编译：
template→ AST（抽象语法树） → render 函数 → VNode。Diff 算法：
同层比较：跳过跨层级操作（提升性能）。
双端比较：头尾指针向中间移动，优化列表更新。
Key 作用：通过
key复用节点（避免无谓重建）。
优化点：
静态节点标记（
PatchFlag），跳过比对。事件缓存（
cacheHandlers），避免重复绑定。
三、组件化（架构核心）
本质：组件是 Vue.extend 创建的构造器，实例化后挂载到真实 DOM。
通信机制：
Props/Events：父子组件单向数据流。
Provide/Inject：跨层级依赖注入。
EventBus/Vuex：复杂状态管理。
生命周期：beforeCreate→created（数据观测完成） →beforeMount→mounted（DOM 挂载） →beforeUpdate→updated→beforeDestroy→destroyed。
四、模板编译（性能优化基础）
流程：
解析：
template→ AST（标签、属性、指令解析）。优化：标记静态节点（
static）、静态根节点（staticRoot）。生成：AST →
render函数（字符串拼接 +with作用域）。
关键点：
静态节点在更新时直接跳过 Diff。
render函数返回 VNode，避免运行时编译。
五、Vue 3 核心改进（面试加分项）
Composition API：
解决 Options API 逻辑复用难题（
setup函数 +ref/reactive）。
性能优化：
Proxy响应式 +PatchFlag静态标记 + 事件缓存。
Tree-shaking：
按需引入（如
v-model、v-show独立打包）。
Fragments：
支持多根节点组件。
六、高频面试问题与回答策略
Q：Vue 响应式原理是什么？
答：Vue 2 通过
Object.defineProperty劫持属性，结合Dep和Watcher实现依赖收集与更新；Vue 3 改用Proxy解决缺陷，支持更广泛的响应式场景。Q：虚拟 DOM 和 Diff 算法为什么快？
答：虚拟 DOM 将 DOM 操作转为 JS 计算，Diff 算法通过同层比较、双端比对和
key复用节点，最小化真实 DOM 操作。静态节点标记进一步减少比对开销。Q：Vue 3 相比 Vue 2 有哪些优势？
答：Composition API 提升逻辑复用性，
Proxy响应式更强大，Tree-shaking 减少包体积，PatchFlag 优化更新性能。Q：组件通信方式有哪些？
答：Props/Events（父子）、Provide/Inject（跨层级）、EventBus/Vuex（全局）、
$attrs/$listeners（透传）、v-model（双向绑定）。Q：模板编译过程是怎样的？
答：模板 → AST → 优化（标记静态节点） → 生成
render函数 → 返回 VNode。静态节点在更新时直接复用，提升性能。
总结：面试核心要点
响应式：
Object.definePropertyvsProxy，依赖收集与派发更新。虚拟 DOM：Diff 算法优化策略（同层、双端、Key）。
组件化：生命周期、通信机制。
编译优化：静态节点标记、render 函数生成。
Vue 3：Composition API、性能优化、Tree-shaking。
面试建议：
理解设计思想（如数据驱动视图、组件化），而非死记代码。
结合场景说明优化点（如
key的作用、静态节点跳过 Diff）。对比 Vue 2/3 差异，体现技术深度。