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</>
