第2章 Vue核心概念与响应式原理

🧩 面试问题 1：请解释 Vue 的响应式原理

🎯 面试官考察点
是否真正理解响应式系统的完整闭环，还是只停留在“数据变化视图更新”的表面描述。重点看能否说清楚依赖收集的时机与流程。

📐 回答框架
数据劫持 → 依赖收集 → 派发更新 → 虚拟 DOM 对比 → 真实 DOM 更新（五步递进）

✏️ 简短示例回答
Vue 通过 Object.defineProperty 劫持 data 属性，为每个属性创建 Dep 实例。组件渲染时触发 getter 完成依赖收集；数据变化时触发 setter 通知 Dep，Dep 通知对应 Watcher 执行更新，经虚拟 DOM 对比后批量更新真实 DOM。

🔁 可能追问
① 数组的响应式是如何处理的？② Object.defineProperty 和 Proxy 的核心区别？③ 依赖收集会不会重复？如何避免？

🧩 面试问题 2：虚拟 DOM 的作用是什么？Diff 算法如何优化性能？

🎯 面试官考察点
是否理解虚拟 DOM 的设计初衷（跨平台 + 批量更新），以及 Diff 算法从 O(n³) 到 O(n) 的关键优化策略。

📐 回答框架
虚拟 DOM 定义 → 三大作用（性能/跨平台/抽象） → Diff 优化策略（同层对比 + key + 双端指针） → Vue2/Vue3 差异

✏️ 简短示例回答
虚拟 DOM 是真实 DOM 的 JS 对象映射，通过 Diff 算法对比新旧 VNode 差异，最小化 DOM 操作。Vue 采用同层对比、key 复用和双端指针策略，将时间复杂度从 O(n³) 降为 O(n)，显著提升渲染性能。

🔁 可能追问
① Vue3 的 Diff 相比 Vue2 做了哪些改进？② 为什么不直接操作真实 DOM？③ key 为什么不能用 index？

🧩 面试问题 3：如何理解 Vue 的数据驱动？与 jQuery 开发有何本质区别？

🎯 面试官考察点
考察对“声明式渲染”范式的理解深度，以及能否从工程化角度对比两种开发模式的优劣。

📐 回答框架
数据驱动本质（声明式） → 工作机制（响应式 + 模板编译） → 与 jQuery 对比（命令式 vs 声明式） → 适用场景

✏️ 简短示例回答
数据驱动即数据变化自动驱动视图更新，开发者只需声明数据与模板的映射关系。jQuery 需要手动选择 DOM 并操作，而 Vue 通过响应式系统自动追踪变化，在复杂应用中大幅降低 DOM 维护成本，提升开发效率和可维护性。

🔁 可能追问
① 数据驱动和事件驱动的本质区别是什么？② Vue 模板编译成什么？③ 数据驱动在 SSR 中如何体现？

🏗️ 项目案例 — ShopAdmin 电商管理系统