Vue 常见与高阶面试题详解：从基础到源码原理

一、基础面试题

1. Vue 的核心特性是什么？

   • 答案：Vue 的核心特性包括数据驱动视图（MVVM 模式）、组件化开发、指令系统（如 v-if、v-for）、响应式数据绑定（基于 Object.defineProperty 或 Proxy），以及轻量高效的虚拟 DOM 机制。

2. v-if 和 v-show 的区别？

   • 答案：

• v-if：动态添加/移除 DOM 元素，适用于切换频率低的场景。
• v-show：通过 display: none 控制显隐，适合频繁切换的场景。
• 扩展：v-if 支持 <template> 标签和 v-else，而 v-show 不支持。

3. 为什么组件中的 data 必须是函数？

   • 答案：避免多个组件实例共享同一数据对象，导致状态污染。函数返回独立的数据副本，保证组件复用时的数据隔离。

4. Vue 生命周期钩子有哪些？

   • 答案：

• 创建阶段：beforeCreate、created（数据初始化完成，但 DOM 未生成）
• 挂载阶段：beforeMount、mounted（DOM 已渲染）
• 更新阶段：beforeUpdate、updated
• 销毁阶段：beforeDestroy、destroyed
• 扩展：activated 和 deactivated 用于 <keep-alive> 缓存的组件。

5. v-for 中为什么要用 key？
   • 答案：key 用于标识元素唯一性，帮助 Vue 高效更新虚拟 DOM。若缺少 key，可能导致列表渲染错误或性能下降。

---

二、高阶面试题

1. Vue 响应式原理（Vue2 和 Vue3 的区别）？
   • 答案：

• Vue2：通过 Object.defineProperty 劫持对象属性的 getter/setter，需递归遍历对象和数组（通过重写数组方法实现监听）。
• Vue3：使用 Proxy 代理整个对象，支持动态新增属性和深层嵌套结构的响应式，性能更优。
  • 扩展：Vue3 的 Reflect 配合 Proxy 解决了 this 指向问题。

2. Vuex 的核心概念和工作流程？
   • 答案：

• State：单一状态树，存储全局数据。
• Mutation：同步修改状态，通过 commit 触发。
• Action：处理异步逻辑，通过 dispatch 触发，最终提交 Mutation。
• Getter：计算派生状态。
• 模块化：通过 namespaced: true 分割大型状态树。

3. Vue 的 Diff 算法优化策略？
   • 答案：

• 同层比较：仅对比同一层级的节点，减少复杂度。
• 双端指针：新旧节点首尾交叉对比，快速定位差异。
• Key 复用：通过 key 匹配相同节点，避免重复渲染。

4. Vue3 的 Composition API 解决了哪些问题？
   • 答案：

• 逻辑复用：通过 setup 和自定义 Hook 聚合相关代码，解决 Mixins 的命名冲突和来源不清晰问题。
• 类型推断：更好的 TypeScript 支持。
• 响应式隔离：ref 和 reactive 明确区分基本类型和对象类型。

5. 如何实现 Vue 自定义指令？
   • 答案：

     // 全局指令
     Vue.directive('focus', {
       inserted: (el) => el.focus()
     });
     // 局部指令
     export default {
       directives: {
         highlight: {
           bind(el, binding) {
             el.style.backgroundColor = binding.value;
           }
         }
       }
     }

• 扩展：常用钩子包括 bind、inserted、update 等。

---

三、实战与优化

1. 如何优化 Vue 项目的首屏加载速度？
   • 答案：

• 路由懒加载：使用 () => import('./Component.vue') 分割代码。
• CDN 加速：第三方库通过 <script> 引入。
• SSR/SSG：服务端渲染或静态生成（如 Nuxt.js）。
• Prefetch/Preload：预加载关键资源。

2. Vue 中如何实现权限控制？
   • 答案：

• 路由守卫：在 router.beforeEach 中校验用户角色和权限。
• 动态路由：根据权限表动态添加路由配置。
• 组件级控制：使用 v-if 或自定义指令（如 v-permission）。

---

四、扩展：源码级问题

1. Vue 的模板编译过程？

   • 答案：

2. 解析：将模板字符串转换为 AST（抽象语法树）。

3. 优化：标记静态节点，减少 Diff 范围。

4. 生成：将 AST 转换为可执行的渲染函数。

5. nextTick 的实现原理？

   • 答案：利用微任务队列（如 Promise.then、MutationObserver）或宏任务（如 setImmediate、setTimeout）异步执行回调，确保 DOM 更新后触发。

---

总结：本文覆盖 Vue 面试核心考点，从基础用法到源码原理，结合实战案例与优化策略，适合不同阶段的开发者查漏补缺。建议结合项目经验，深入理解设计思想，灵活应对面试挑战。