35 道常见前端 Vue 面试题深度解析
Vue.js 作为当前主流的前端框架之一，其核心概念和生态组件是面试中的高频考点。本文整理了 35 道涵盖基础原理、组件通信、路由管理及性能优化的经典面试题，帮助开发者系统梳理知识体系。
1. 请讲述下 Vue 的 MVVM 的理解？
MVVM（Model-View-ViewModel）是一种设计模式，旨在将数据模型与视图表现层通过数据驱动进行分离。
- Model：代表数据模型，定义数据和业务逻辑。
- View：代表页面展示组件（DOM 展现形式），负责将数据转化为 UI。
- ViewModel：连接 Model 和 View 的桥梁，监听数据变化并控制视图行为，处理用户交互。
在 MVVM 架构下，View 和 Model 之间没有直接联系，而是通过 ViewModel 交互。双向数据绑定使得 View 的变化同步到 Model，Model 的变化也立即反应到 View，无需人为干涉。
2. Vue 的生命周期及理解？
Vue 实例从创建到销毁会经历一系列生命周期钩子，主要分为 8 个阶段：
- 创建前/后：
beforeCreate时实例未初始化；created时 data 和 methods 已初始化，但 DOM 尚未挂载。 - 载入前/后：
beforeMount时模板编译完成但未挂载；mounted时实例挂载完成，可操作真实 DOM。 - 更新前/后：
beforeUpdate触发于数据变更但 DOM 未更新时；updated触发于 DOM 更新完成后。 - 销毁前/后：
beforeDestroy时实例仍可用；destroyed时实例解绑事件监听，不可再用。
具体应用场景：
beforeCreate：不能访问 data 或 methods。created：适合发起异步请求、初始化非 DOM 依赖的数据。beforeMount：内存中模板已编译，但页面未渲染。mounted：组件进入运行阶段，适合操作 DOM、插件初始化。beforeUpdate/updated：用于响应数据变化后的 DOM 同步处理。beforeDestroy/destroyed：清理定时器、取消订阅等收尾工作。
3. v-if 和 v-show 的区别？
- 共同点：都能控制元素的显示和隐藏。
- 不同点：
v-show：本质是切换 CSS 的display属性，元素始终存在，只编译一次。适合频繁切换的场景。v-if：动态向 DOM 树添加或删除元素，初始值为 false 时不编译。适合不经常切换的场景，因为切换开销较大。
4. v-if 和 v-for 同时使用在同一个标签上的表现？
当两者共存时，v-for 的优先级高于 v-if。这意味着 v-if 会在每个循环中分别执行。因此不推荐在同一标签上混用，建议将 v-if 移至外层容器，或通过计算属性过滤数据后再渲染。
5. v-for 中的 key 的理解？
用于给每个节点做唯一标识，帮助 Diff 算法高效识别节点。正确的 key 能减少不必要的 DOM 重绘和重建，提升虚拟 DOM 更新效率。
