Vue

Vue 面试主线：响应式原理 → 生命周期 → 组件通信 → 虚拟 DOM → 性能优化。Vue 2 和 Vue 3 的差异是重点。

Q1: Vue 的响应式原理？Vue 2 和 Vue 3 的区别？ 「🟡 中级」

考察点：Vue 核心机制，必问题。

参考答案：

• Vue 2：用 Object.defineProperty 劫持对象属性的 getter/setter，依赖收集 + 派发更新。缺陷：无法检测属性新增/删除（需 Vue.set）、数组需要重写方法。
• Vue 3：用 Proxy 代理整个对象，可拦截所有操作（get/set/has/delete 等），支持 Map/Set/数组，性能更好。
• 更新流程：数据变化 → setter/Proxy handler 触发 → Dep 通知 Watcher → Watcher 排队 → 下一个 tick 批量更新 DOM。

追问延伸：

• 为什么 Vue 3 的响应式性能更好？
• ref 和 reactive 的区别？

Q2: Vue 的生命周期？ 「🟢 校招/初级」

考察点：组件从创建到销毁的完整过程。

参考答案：

• Vue 2：beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
• Vue 3：setup → beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted
• 常用钩子：mounted（DOM 就绪，可操作 DOM/发请求）、beforeUnmount（清理定时器/事件监听）。
• setup（Vue 3 Composition API）：在 beforeCreate 之前执行，替代 data/methods/computed 等选项。

追问延伸：

• 父组件和子组件的生命周期执行顺序？
• keep-alive 的组件会触发哪些钩子？（activated/deactivated）

Q3: 组件之间怎么通信？ 「🟢 校招/初级」

考察点：组件化开发的基本功。

参考答案：

• 父 → 子：props。
• 子 → 父：$emit 自定义事件。
• 兄弟组件：EventBus（Vue 3 已移除，用 mitt 替代）或状态提升。
• 跨层级：provide/inject（祖先 → 后代）、$attrs（透传属性）。
• 全局状态：Vuex / Pinia（Vue 3 推荐 Pinia，更轻量、支持 TS）。

追问延伸：

• v-model 在组件上是怎么实现的？
• Pinia 和 Vuex 的核心区别？

Q4: computed 和 watch 的区别？ 「🟡 中级」

考察点：响应式数据的使用场景。

参考答案：

• computed：计算属性，有缓存（依赖不变不重新计算），必须有返回值，适合派生数据。
• watch：侦听器，无缓存，数据变化时执行副作用（请求、操作 DOM），可以没有返回值。
• 选型：能用 computed 就不用 watch（性能更好）；需要异步操作或复杂逻辑时用 watch。

追问延伸：

• watch 的 deep 和 immediate 选项有什么用？
• watchEffect 和 watch 的区别？

Q5: Vue 的虚拟 DOM 和 diff 算法？ 「🟡 中级」

考察点：渲染机制的理解。

参考答案：

• 虚拟 DOM 是用 JS 对象描述真实 DOM 结构，更新时对比新旧虚拟 DOM（diff），最小化真实 DOM 操作。
• diff 策略：同层比较，不跨层级；通过 key 标识节点，复用/移动已有节点。
• Vue 3 优化：静态提升（static hoisting）、补丁标记（PatchFlag，只 diff 动态部分）、事件缓存。

追问延伸：

• 为什么 v-for 要加 key？key 用 index 有什么问题？
• Vue 3 的 PatchFlag 是怎么工作的？

Q6: nextTick 的原理和作用？ 「🟡 中级」

考察点：异步更新机制。

参考答案：

• Vue 的 DOM 更新是异步的：数据变化后，Vue 开启一个微任务队列，批量更新 DOM。
• nextTick 把回调放入这个微任务队列，确保在 DOM 更新完成后执行。
• 实现：优先用 Promise.then（微任务），降级用 MutationObserver、setImmediate、setTimeout。
• 场景：数据变化后立即获取更新后的 DOM 尺寸/内容。

追问延伸：

• 为什么 Vue 要异步更新 DOM？
• nextTick 和 setTimeout 有什么区别？

Q7: Vue 3 的 Composition API 解决了什么问题？ 「🟡 中级」

考察点：Vue 3 的核心改进。

参考答案：

• Vue 2 的 Options API 在组件复杂时，相关逻辑分散在 data/methods/computed/watch 中，难以维护和复用。
• Composition API（setup + ref/reactive/computed/watch）：按功能组织代码，相关逻辑放在一起；逻辑复用更灵活（自定义 hooks 替代 mixins）。
• 优势：更好的 TypeScript 支持、更小的打包体积（Tree Shaking 友好）、逻辑复用更清晰。

追问延伸：

• ref 和 reactive 怎么选？
• 自定义 hooks 怎么设计？