35 道常见前端 Vue 面试题解析
Vue 作为当前主流的前端框架之一，掌握其核心原理和常用 API 是面试中的必备项。以下整理了 35 道高频面试题，涵盖基础概念、生命周期、指令、通信及性能优化等方面，帮助系统梳理知识体系。
1. MVVM 模式理解
MVVM（Model-View-ViewModel）旨在将数据模型与视图层分离。Model 定义业务逻辑和数据，View 负责 UI 展示，ViewModel 则是两者之间的桥梁。
通过双向数据绑定，ViewModel 监听 Model 变化并更新 View，同时处理用户交互反馈给 Model。这种架构下，View 和 Model 无需直接联系，同步工作完全自动化。
2. Vue 生命周期详解
Vue 实例的生命周期主要分为 8 个阶段：
- 创建前/后：
beforeCreate时实例未初始化；created时data已初始化，但 DOM 尚未挂载。 - 载入前/后：
beforeMount模板编译完成但未挂载；mounted实例挂载完成，可操作真实 DOM。 - 更新前/后：
beforeUpdate数据已变但视图未更新；updated视图同步完成。 - 销毁前/后：
beforeDestroy实例可用；destroyed实例彻底销毁，事件解绑。
注意：在
created中适合发起异步请求获取初始数据；在mounted中适合操作 DOM 或第三方库集成。
3. v-if 与 v-show 的区别
两者都能控制元素显示隐藏，但实现机制不同：
- v-show：本质是切换 CSS 的
display属性，元素始终存在 DOM 中。适合频繁切换的场景。 - v-if：动态向 DOM 树添加或删除节点。初始值为 false 时不渲染。适合条件不常变化的场景。
4. v-if 与 v-for 同用
当两者在同一标签上使用时，v-for 优先级更高。这意味着 v-if 会在每个循环中执行。官方不推荐这样写，建议将 v-if 移至外层容器，避免性能浪费。
5. key 的作用
key 为虚拟节点提供唯一标识，帮助 Diff 算法高效识别节点变化。使用索引（index）作为 key 可能导致渲染错误，建议使用唯一 ID。
6. Transition 过渡动画
Transition 组件用于处理进入、离开和列表的过渡效果。它包含 6 个内置类名（如 v-enter-active, v-leave-to），也可自定义类名或设置持续时间（duration）。
<transition name="fade" duration="1000">
<div v-if="show">Content</div>
</transition>
7. 自定义指令
Vue 支持全局和局部自定义指令。钩子函数包括 bind, inserted, update, componentUpdated, unbind。
// 全局指令
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
8. Vue 实现原理
Vue 采用数据劫持结合发布者 - 订阅者模式。通过 Object.defineProperty 劫持属性的 setter/getter，数据变动时通知订阅者更新视图。
核心流程：
- Observer 递归遍历数据对象，添加响应式属性。
- Compile 解析模板指令，替换变量并绑定更新函数。
- Watcher 作为桥梁，订阅数据变化并触发更新。
9. Diff 算法理解
Diff 算法用于最小化 DOM 操作。比较新旧 VNode 时遵循同级比较原则，不会跨级对比。通过 patch 方法对真实 DOM 打补丁。
- 相同节点：检查子节点差异。
- 不同节点：直接替换。
- 子节点更新：通过 updateChildren 调整顺序或插入删除。
10. 组件通信
- 父子通信：父传子用
props，子传父用$emit触发事件。 - 兄弟/非父子通信：可使用 Event Bus（空 Vue 实例）或 Vuex。
// 事件总线示例
const bus = new Vue()
// 发送
bus.$emit('event-name', data)
// 接收
bus.$on('event-name', callback)
11. 路由模式区别
- Hash 模式：URL 带
#，兼容性好，服务端无需配置。 - History 模式：利用 HTML5 History API，URL 更美观，但需服务端配合处理 404。
12. Vue 与 React/Angular 对比
- Vue：轻量级，双向绑定，上手快，中文文档友好。
- React：单向数据流，JSX，生态丰富，灵活性高。
- Angular：全功能框架，学习曲线陡峭，依赖注入强大。
13. Vue Router 钩子
- 全局钩子：
beforeEach,afterEach，常用于权限校验。 - 路由独享：
beforeEnter，针对特定路由。 - 组件内：
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave。
14. Vuex 状态管理
Vuex 集中管理应用状态，包含五大核心概念：
- State：单一状态树。
- Getter：计算属性。
- Mutation：同步修改状态。
- Action：处理异步逻辑。
- Module：模块化拆分。
15. Filter 过滤器
用于文本格式化。Vue 2 支持全局和局部注册，但在 Vue 3 中已被移除，推荐使用计算属性或方法替代。
16. Keep-alive 缓存
内置组件，用于缓存活动组件实例，避免重复渲染。支持 include 和 exclude 属性控制缓存范围。
17. 组件封装
封装组件需明确输入（Props）、输出（Events/Slots）及内部逻辑。保持组件单一职责，便于复用。
18. 首屏白屏优化
- 路由懒加载。
- Gzip 压缩与 CDN 加速。
- SSR（服务端渲染）。
- 移除生产环境 Console。
19. v-cloak 指令
解决编译前的闪烁问题。配合 CSS [v-cloak] { display: none; } 使用，实例编译完成后自动移除。
20. Template 编译过程
Template -> AST（抽象语法树） -> Render Function -> VNode（虚拟 DOM）。
21. v-model 原理
表单双向绑定语法糖，等价于 :value + @input。
22. Computed vs Watch
- Computed：基于依赖缓存，适合多对一映射，无副作用。
- Watch：监听数据变化，适合异步操作或开销较大的任务。
23. $nextTick 使用
用于等待 DOM 更新后再执行回调。修改数据后立即获取 DOM 可能不准确，需用此方法延迟执行。
24. Data 为何是函数
组件复用时，若 data 为对象会导致共享引用。函数返回新对象确保每个实例拥有独立数据空间。
25. SPA 与 MPA 区别
- SPA：单页应用，前后端分离，体验流畅但 SEO 较弱。
- MPA：多页应用，传统刷新，SEO 友好但交互成本高。
26. 常用修饰符
.stop：阻止冒泡。.prevent：阻止默认行为。.self：仅自身触发。.once：只触发一次。
27. 数组更新触发视图
Vue 无法检测数组索引直接赋值。应使用 push, pop, splice, sort, reverse 等变异方法，或使用 Vue.set。
28. Route 与 Router 区别
- $router：路由实例，用于跳转（push, replace, go）。
- $route：当前路由信息对象（path, params, query）。
29. 路由懒加载
- 异步组件
resolve => require(...)。 - ES6
import()。 - Webpack
require.ensure()。
30. Delete 与 Vue.delete
原生 delete 仅标记为空，不触发响应式更新；Vue.delete 能正确触发视图更新。
31. 路由跳转与 location.href
路由跳转无刷新，体验好；location.href 会刷新页面，适用于外部链接或强制刷新。
32. Slot 插槽用法
子组件预留 <slot> 占位，父组件传入内容填充。支持命名插槽和多插槽。
33. 事件方法理解
- $emit：触发自定义事件。
- $on：监听事件。
- $once：监听一次后移除。
- $off：移除监听。
34. Root, Refs, Parent
- $root：根实例。
- $refs：DOM 引用，非响应式。
- $parent：访问父组件实例。
35. 常见问题排查
- 样式污染：使用 Scoped CSS 或唯一 Class。
- 安卓点击无效：Router-link 阻止原生事件，用
.native修饰符。 - 闪屏乱码：使用
v-cloak或display:none配合mounted显示。
以上总结涵盖了 Vue 开发的核心知识点。实际工作中，理解原理比死记硬背更重要，建议在项目中多加实践以加深印象。
