跳到主要内容35 道常见前端 Vue 面试题解析与实战指南 | 极客日志JavaScript大前端算法
35 道常见前端 Vue 面试题解析与实战指南
Vue 框架面试核心考点涵盖 MVVM 原理、生命周期、指令差异、组件通信、路由模式及状态管理。重点解析 v-if 与 v-show 性能区别、Diff 算法机制、Keep-alive 缓存策略以及 Vuex 数据流设计。包含首屏优化、样式隔离、数组响应式更新等实战问题解决方案，适合前端开发者系统复习与查漏补缺。
奶糖兔1 浏览 前言
Vue.js 作为当前主流的前端框架之一，其核心概念和生态工具链是面试中的高频考点。本文整理了 35 道涵盖基础原理、组件通信、路由管理及性能优化的常见问题，并结合实际代码示例进行解析，帮助开发者系统梳理知识体系。
1. 请讲述下 Vue 的 MVVM 理解？
MVVM（Model-View-ViewModel）旨在将数据模型与视图层分离，通过数据驱动实现自动同步。
- Model：数据模型，定义业务逻辑和数据。
- View：视图层，负责展示 UI。
- ViewModel：连接桥梁，监听数据变化并更新视图，处理用户交互。
在 MVVM 架构下，View 和 Model 无直接联系，双向绑定由 ViewModel 自动完成，无需手动操作 DOM。
2. Vue 的生命周期及理解？
Vue 实例生命周期主要分为 8 个阶段：
- 创建前/后：
beforeCreate 时实例初始化但 data/methods 未挂载；created 时 data/methods 已就绪，但 DOM 尚未渲染。
- 载入前/后：
beforeMount 模板编译完成但未挂载到页面；mounted 实例挂载完成，可访问真实 DOM。
- 更新前/后：
beforeUpdate 数据变更但视图未更新；updated 视图同步完成。
- 销毁前/后：
beforeDestroy 实例可用，解除事件监听；destroyed 实例完全销毁。
3. v-if 和 v-show 的区别？
- 共同点：控制元素显示隐藏。
- 不同点：
v-show 本质是切换 CSS display 属性，初始开销小，适合频繁切换；v-if 是动态添加/删除 DOM 节点，初始开销大，适合不常切换的场景。
4. v-if 和 v-for 同时使用在同一个标签上的表现？
v-for 优先级高于 v-if。若需同时使用，建议将 v-if 移至外层容器，避免性能损耗和逻辑混乱。
5. v-for 中的 key 的理解？
key 为每个节点提供唯一标识，帮助 Diff 算法高效识别节点，减少不必要的 DOM 重绘和复用错误。
6. Vue 中 transition 的理解？
Transition 用于处理进入、离开或列表过渡动画。主要涉及 6 个默认 class：
v-enter, v-enter-active, v-enter-tov-leave, v-leave-active, v-leave-to
可通过 enter-class 等属性自定义样式，或使用 duration 设置时间，配合 before-enter 等钩子函数控制流程。
7. Vue 的自定义指令？
分为全局指令（Vue.directive）和局部指令（组件内 directives）。常用钩子包括：
bind：指令第一次绑定调用。- ：元素插入父节点后调用。
inserted
update：组件更新时调用。componentUpdated：组件及其子组件更新后调用。unbind：元素移除时调用。
参数包含 el（DOM 元素）、binding（对象，含 name/value/expression 等）、vnode 等。8. Vue 的实现原理？
- Observer：递归遍历数据对象，使用
Object.defineProperty 劫持 setter/getter，监听变化。
- Compile：解析模板指令，替换变量，绑定更新函数。
- Watcher：订阅者，连接 Observer 和 Compile，数据变动时触发更新回调。
- MVVM：整合三者，实现数据 -> 视图、视图 -> 数据的双向绑定。
9. Vue 的 Diff 算法理解？
Diff 算法用于最小化 DOM 操作，仅修改差异部分。
- 同级比较：只在同一层级比较，不跨级。
- Patch 过程：对比新旧 VNode，相同则检查子节点，不同则替换。
- updateChildren：处理子节点列表，通过首尾指针移动优化顺序调整。
10. Vue 组件的通信？
父子通信：父传子用 props，子传父用 $emit 触发事件。
<child @getinfo="myname" :userinfo="usermessage"></child>
export default {
data() { return { usermessage: '我是父亲' } },
methods: { myname(name) { console.log(name) } }
}
export default {
props: ['userinfo'],
methods: { getname() { this.$emit('getinfo', 'bilibili') } }
}
兄弟组件通信：通常借助空 Vue 实例作为事件总线。
import Vue from 'vue'; export default new Vue();
bus.$emit('aevent', this.msg);
bus.$on('aevent', (val) => { this.msg = val; });
11. Vue 的路由模式及区别？
- Hash 模式：URL 带
#，兼容性好，服务端无需配置，不会刷新页面。
- History 模式：利用 HTML5 History API，URL 美观，但需要服务端配置支持，否则刷新可能报 404。
12. Vue 与 React、Angular 的比较？
- Vue：轻量级，关注视图层，中文文档友好，双向绑定，上手快。
- React：JSX 语法，虚拟 DOM 脏检查，组件化强，社区庞大。
- Angular：全功能框架，学习曲线陡峭，依赖注入，性能依赖脏检查。
13. Vue Router 的钩子函数？
- 全局钩子：
beforeEach（权限判断等），afterEach（统计等）。
- 路由独享：单个路由配置中的
beforeEnter。
- 组件内守卫：
beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave。
14. Vuex 的使用？
- State：单一状态树，存储数据。
- Getters：计算属性，过滤数据。
- Mutations：同步修改状态的方法。
- Actions：处理异步逻辑，提交 mutations。
- Modules：模块化拆分，管理复杂状态。
15. Vue 的 filter 的理解与用法？
用于文本格式化，支持全局或局部注册。只能用于插值表达式和 v-bind。
Vue.filter('testfilter', function (value, text) { return value + text })
{{ test | changemsg(1234) }}
16. Vue 的 keep-alive 的理解？
内置组件，缓存活跃组件实例，保留状态。触发 activated/deactivated 而非 mounted/unmounted。
支持 include/exclude 属性控制缓存范围。
17. 如何封装一个 Vue 组件？
明确需求 -> 搭建模板结构 -> 定义 Props 输入 -> 暴露 Methods 输出 -> 编写样式与逻辑。
18. Vue 首屏白屏如何解决？
- 路由懒加载。
- 开启 Gzip 压缩。
- CDN 加速。
- SSR（服务端渲染）。
- 提取公共库（webpack externals）。
- 添加 Loading 效果。
19. Vue 中的 v-cloak 的理解？
解决编译前的闪烁问题。设置 [v-cloak] { display: none; }，实例编译完成后自动移除该指令。
20. Vue 中 template 编译的理解？
Template -> AST（抽象语法树） -> Render Function -> VNode（虚拟 DOM）。
21. v-model 的理解？
表单双向绑定的语法糖，等价于 :value 绑定 + @input 事件监听。
22. computed 和 watch 的用法和区别？
- Computed：有缓存，依赖变化才重新计算，适合多对一映射。
- Watch：无缓存，数据变化立即触发，适合一对多或异步操作。
23. $nextTick 的使用？
在下次 DOM 更新循环结束之后执行延迟回调，用于获取更新后的 DOM。
24. data 为什么是一个函数？
组件复用时，函数返回新对象，确保每个实例拥有独立的数据空间，避免引用污染。
25. Vue 单页面和传统多页面区别？
- SPA：一次加载，路由切换不刷新，体验好，SEO 弱。
- MPA：每次跳转刷新页面，SEO 友好，体验稍逊。
26. Vue 常用的修饰符？
.stop（阻止冒泡），.prevent（阻止默认行为），.capture（捕获模式），.self（自身触发），.once（只触发一次）。
27. Vue 更新数组时触发视图更新的方法？
push, pop, shift, unshift, splice, sort, reverse。
28. route 和 router 的区别？
- $router：路由实例对象，包含导航方法（push, replace, go）。
- $route：当前路由信息对象，包含路径、参数、query 等元数据。
29. Vue-Router 实现懒加载的方式？
- 异步组件：
resolve => require([...])。
- ES6 Import：
() => import(...)，支持 webpackChunkName 分块。
- Webpack Require：
require.ensure。
30. delete 和 Vue.delete 删除数组的区别？
delete 仅标记为空，数组长度不变；Vue.delete 真正删除元素，触发响应式更新。
31. 路由跳转和 location.href 的区别？
- 路由跳转：无刷新，SPA 体验。
- location.href：整页刷新，类似传统跳转。
32. Vue 的 slot 的用法？
插槽机制，允许父组件向子组件传递内容。支持命名插槽和默认插槽。
33. $emit, $on, $once, $off 理解？
- $emit：触发自定义事件。
- $on：监听事件。
- $once：监听一次后自动移除。
- $off：移除监听器。
34. $root, $refs, $parent 的使用？
- $root：根实例，可作全局 Store。
- $refs：非响应式 DOM 引用，用于直接操作子组件。
- $parent：访问父组件实例，慎用以免增加耦合。
35. Vue 开发遇到的问题？
- 样式污染：使用 Scoped CSS 或唯一 Class 隔离。
- Android 点击失效：转码问题，安装 babel-polyfill。
- 闪屏乱码：使用
v-cloak 或 display:none 配合 mounted 显示。
- router-link 事件无效：使用
.native 修饰符监听原生事件。
相关免费在线工具
- 加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
- Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。 在线工具，Gemini 图片去水印在线工具，online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
