Vue 常见与高阶面试题详解：从基础到源码原理
一、基础面试题
Vue 的核心特性是什么？
答案：Vue 的核心特性包括数据驱动视图（MVVM 模式）、组件化开发、指令系统（如 v-if、v-for）、响应式数据绑定（基于 Object.defineProperty 或 Proxy），以及轻量高效的虚拟 DOM 机制。
v-if 和 v-show 的区别？
答案：
v-if：动态添加/移除 DOM 元素，适用于切换频率低的场景。
v-show：通过 display: none 控制显隐，适合频繁切换的场景。
扩展：v-if 支持 标签和 v-else，而 v-show 不支持。
为什么组件中的 data 必须是函数？
答案：避免多个组件实例共享同一数据对象，导致状态污染。函数返回独立的数据副本，保证组件复用时的数据隔离。
Vue 生命周期钩子有哪些？
答案：
创建阶段：beforeCreate、created（数据初始化完成，但 DOM 未生成）
挂载阶段：beforeMount、mounted（DOM 已渲染）
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
扩展：activated 和 deactivated 用于
v-for 中为什么要用 key？
答案：key 用于标识元素唯一性，帮助 Vue 高效更新虚拟 DOM。若缺少 key，可能导致列表渲染错误或性能下降。
二、高阶面试题
Vue 响应式原理（Vue2 和 Vue3 的区别）？
答案：
Vue2：通过 Object.defineProperty 劫持对象属性的 getter/setter，需递归遍历对象和数组（通过重写数组方法实现监听）。
Vue3：使用 Proxy 代理整个对象，支持动态新增属性和深层嵌套结构的响应式，性能更优。
扩展：Vue3 的 Reflect 配合 Proxy 解决了 this 指向问题。
Vuex 的核心概念和工作流程？
答案：
State：单一状态树，存储全局数据。
Mutation：同步修改状态，通过 commit 触发。
Action：处理异步逻辑，通过 dispatch 触发，最终提交 Mutation。
Getter：计算派生状态。
模块化：通过 namespaced: true 分割大型状态树。
Vue 的 Diff 算法优化策略？
答案：
同层比较：仅对比同一层级的节点，减少复杂度。
双端指针：新旧节点首尾交叉对比，快速定位差异。
Key 复用：通过 key 匹配相同节点，避免重复渲染。
Vue3 的 Composition API 解决了哪些问题？
答案：
逻辑复用：通过 setup 和自定义 Hook 聚合相关代码，解决 Mixins 的命名冲突和来源不清晰问题。
类型推断：更好的 TypeScript 支持。
响应式隔离：ref 和 reactive 明确区分基本类型和对象类型。
如何实现 Vue 自定义指令？
答案：
// 全局指令 Vue.directive('focus', { inserted: (el) => el.focus() }); // 局部指令 export default { directives: { highlight: { bind(el, binding) { el.style.backgroundColor = binding.value; } } } }
扩展：常用钩子包括 bind、inserted、update 等。
三、实战与优化
如何优化 Vue 项目的首屏加载速度？
答案：
路由懒加载：使用 () => import('./Component.vue') 分割代码。
CDN 加速：第三方库通过