35 道常见前端 Vue 面试题解析
Vue.js 作为当前主流的前端框架之一，其核心概念与底层原理是面试中的高频考点。本文整理了 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编译模板为虚拟 DOM；mounted实例挂载完成，可操作真实 DOM。 - 更新前/后：数据变化触发
beforeUpdate，DOM 更新完成后触发updated。 - 销毁前/后：
beforeDestroy实例仍可用；destroyed实例解绑事件与指令，无法再访问。
实战建议：在 created 中发起异步请求获取初始数据；在 mounted 中操作第三方库或 DOM；在 beforeDestroy 中清理定时器或事件监听。
3. v-if 与 v-show 的区别
两者都能控制元素显示隐藏，但实现机制不同：
- v-show：基于 CSS
display: none切换，元素始终存在于 DOM 中，适合频繁切换的场景。 - v-if：动态添加或删除 DOM 节点，初始渲染开销大，适合条件不常变化的场景。
注意：当 v-if 与 v-for 同用时，v-for 优先级更高，不建议混用，应将 v-if 移至外层容器。
4. v-for 中 key 的作用
key 为每个节点提供唯一标识，帮助 Diff 算法高效识别节点状态。使用索引（index）可能导致渲染错误或性能问题，建议使用唯一 ID。
5. Transition 过渡动画
Transition 组件用于处理进入、离开和列表的过渡效果。它包含 6 个默认类名（如 v-enter-active），也可自定义类名或设置持续时间（duration）。支持钩子函数（如 enter, leave）以执行 JS 逻辑。
6. 自定义指令
指令分为全局与局部。全局通过 Vue.directive 注册，局部在组件 directives 选项中定义。
常用钩子包括：
bind：指令第一次绑定。inserted：元素插入父节点。update：组件更新时调用。componentUpdated：组件及其子组件更新后。unbind：指令移除时。
参数 binding 包含 name, , , 等详细信息。
