前端面试题之 Vue 专题（2025）
目录
1 谈谈 Vue 的 MVVM 模式
2 谈谈 Vue 的生命周期
3 简述 Vue 组件通讯有哪些方式
4 Vue 中 v-model 双向绑定的原理是什么？
5 什么是 Vue 的 mixin？有什么优缺点？
6 Vue3 相比 Vue2 有哪些显著优化？
7 Vue3 的 Composition API 是什么？
8 Setup 函数在 Vue3 中起什么作用？
9 Vue3 里的 ref 和 reactive 在用法上有什么区别？
10 Vue3 里的 watch 和 watchEffect 有什么区别？
11 Vue Router 的路由守卫有哪些？
12 Vue 的 keep-alive 有什么作用？原理？
13 Vue 的插槽（slot）有哪些类型？
14 如何理解 Vue 的模板编译原理？
15 Composition API 与 Options API 有什么区别？
16 谈谈 Vue 与 Angular 以及 React 的区别
1 谈谈 Vue 的 MVVM 模式
MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构设计模式，特别适用于构建用户界面的应用程序。Model 代表应用程序的数据部分；View 是用户界面的表示层；ViewModel 是 Model 和 View 之间的桥梁。它包含了展示逻辑（即如何展示数据），并且负责将 Model 的数据绑定到 View 上，同时处理用户与 View 的交互，更新 Model 的状态。在 Vue 中，每个 Vue 实例或组件都可以看作是一个 ViewModel。Vue 实例的 data 属性对应于 Model，模板对应于 View，而 Vue 实例中的方法和计算属性则对应于 ViewModel 的逻辑部分。
2 谈谈 Vue 的生命周期
Vue 的生命周期分为创建、挂载、更新和销毁四个阶段，Vue2 有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 八个钩子，而 Vue3 主要变化是：
1) 将 beforeDestroy 和 destroyed 更名为 beforeUnmount 和 unmounted。
2) 在 Composition API 中通过 onMounted、onUpdated 等函数形式使用生命周期。
3) setup() 替代了 beforeCreate 和 created 的功能。
4) 新增了 onRenderTracked 和 onRenderTriggered 调试钩子。
Vue3 的生命周期执行逻辑与 Vue2 基本一致，但推荐使用 Composition API 的写法，更符合现代开发模式。
3 简述 Vue 组件通讯有哪些方式
Vue 组件通信主要分为父子组件、兄弟/跨级组件和全局状态管理三类：
1）父子用 props/$emit 方法。
2）兄弟或非直接父子组件可通过 Event Bus 或 Vuex 全局状态管理通讯（Vue2 用 Vuex，Vue3 优先选 Pinia）。
3）跨级组件则可使用 provide/inject 或直接访问 parent/children/$refs。
Vue3 在通信方式上兼容 Vue2，但推荐使用 Composition API + Pinia 的现代化组合。
4 Vue 中 v-model 双向绑定的原理是什么？
Vue 的 v-model 是一个语法糖，它通过 v-bind 和 v-on 的组合实现双向数据绑定。具体来说，v-bind 用于绑定表单元素的 value 属性到 Vue 实例的数据上，而 v-on 则用于监听表单元素的 input 事件（或 change 等），并在事件触发时更新 Vue 实例的数据。这样，当用户与表单元素交互时，视图和数据之间能够保持同步更新。
5 什么是 Vue 的 mixin？有什么优缺点？
Vue 的 mixin 是一种逻辑复用方案，通过合并组件选项实现功能共享。它的优点是快速复用代码，但缺点也很明显：命名冲突和隐式依赖会导致维护困难。在 Vue3 中，更推荐用 Composition API 的 hook 函数替代 mixin，因为后者能提供更好的类型支持和明确的依赖关系。如果要在老项目中维护 mixin，建议通过命名规范和详细文档降低风险。
6 Vue3 相比 Vue2 有哪些显著优化？
1）性能优化：重写虚拟 DOM，提升渲染效率；完善了响应式，比如提供 ref 和 reactive，解决了 Vue2 对基本类型的响应式限制。
2）语法优化：新增了 Setup 和 Composition API 写法，可以将以前分散的逻辑写在一起，并移除了一些不太友好的写法，比如 data 必须返回对象等，大大提升代码的可读性和可维护性。
3）工程化支持：深度集成 Typescript，以及引入了新的打包工具 Vite，启动和重载效率更高等。
4）组件能力增强：支持跨 DOM 渲染、异步组件加载状态以及多根节点组件等。
5）自定义渲染器 API：可基于 Vue3 开发非 DOM 环境的应用，如小程序、Canvas 等。
7 Vue3 的 Composition API 是什么？
是一种新的代码组织方式，就比如 ref、computed、watch 等，允许开发人员通过函数式的方式组织和复用逻辑，提升代码的可读性和可维护性，将相关逻辑放在一起，而不是分散在 methods、computed 等选项中。
8 Setup 函数在 Vue3 中起什么作用？
Setup 是 Composition API 的核心入口方法，在组件被创建之前（确切的说是在 beforeCreate 和 Created 之间）执行。它接受 props 对象和上下文 context 参数，并必须返回对象供模板使用或返回一个渲染函数。在 Setup 中可以使用 ref 和 reactive 定义响应式数据，但需要注意此时无法访问 this，因为组件示例尚未完全创建。当与 Options API 混用时， setup 返回的内容会优先覆盖同名的 data 或 methods 选项。通过这种设计，实现了逻辑关注点的集中管理，大大提升了代码的组织性和可维护性。
9 Vue3 里的 ref 和 reactive 在用法上有什么区别？
ref 主要用来定义基本类型的响应式数据，也可以用于定义对象或数组，但通常推荐使用 reactive 来处理复杂对象，前者内部通过 .value 访问或修改值，后者无需通过 .value 访问。
10 Vue3 里的 watch 和 watchEffect 有什么区别？
watch 用于监听特定数据源，并会在回调函数中提供旧值和新值。watchEffect 则自动收集依赖的响应式数据，并在依赖变化时执行回调，不直接提供旧值和新值。watch 更灵活且适合需要比较值变化的场景，而 watchEffect 更简洁，适用于执行副作用而无需比较值的场景。
11 Vue Router 的路由守卫有哪些？
Vue Router 提供三类路由守卫：全局守卫（控制所有路由）、路由独享守卫（针对特定路由）和组件内守卫（控制组件渲染）。它们的完整执行顺序是：全局 beforeEach → 路由 beforeEnter → 组件 beforeRouteEnter → 全局 beforeResolve → 全局 afterEach。实际开发中，我常用 beforeEach 做权限校验，用 beforeRouteLeave 防止用户误操作丢失数据等。在 Vue3 中还可以用 onBeforeRouteLeave 组合式 API 更灵活地管理逻辑。
12 Vue 的 keep-alive 有什么作用？原理？
<keep-alive> 是 Vue 的内置组件，用于缓存非活动组件实例，避免重复渲染，保留组件状态（如表单数据、滚动位置等），原理：
1）LRU 缓存策略：默认缓存最近使用的 10 个组件实例，超出时销毁最久未使用的实例。
2）虚拟 DOM 复用：命中缓存时直接复用之前的 VNode，跳过创建和挂载流程。
13 Vue 的插槽（slot）有哪些类型？
Vue 的插槽分为默认插槽、具名插槽和作用域插槽，分别用于基础内容分发、多区块布局和子向父传递数据。Vue3 统一使用 v-slot 语法，比 Vue2 的 slot 和 slot-scope 更简洁。
14 如何理解 Vue 的模板编译原理？
Vue 的模板编译本质是一个智能的代码转换器，它通过编译时的静态分析和优化策略（如静态提升、PatchFlag），将声明式模板转换为高度优化的渲染函数。这种设计既保留了开发阶段的简洁性，又实现了运行时的性能，是 Vue 响应式系统与虚拟 DOM 之间的关键纽带。特别是在处理大型应用时，这些编译时优化能显著降低运行时开销，这也是 Vue 在性能基准测试中表现优异的重要原因。
15 Composition API 与 Options API 有什么区别？
Composition API 是 Vue3 推出的函数式编程方案，解决 Options API 在复杂组件中逻辑分散和复用困难的问题，而 Options API 作为 Vue2 的经典模式，更适合简单场景或快速开发。Composition API 通过 setup() 函数和响应式 API（如 ref/reactive）实现逻辑聚合与灵活复用（自定义 Hook），同时完美支持 TypeScript；Options API 则通过固定选项（data/methods）提供结构化的代码组织，学习成本更低。两者并非互斥，Vue3 完全兼容 Options API，开发者可根据项目复杂度灵活选择或混合使用，但新项目更推荐 Composition API 以提升长期可维护性。
16 谈谈 Vue 与 Angular 以及 React 的区别
Vue、React 和 Angular 分别代表了三种不同的前端框架设计思路。
1）Vue 是渐进式框架，通过响应式系统和模板编译优化，在开发体验和性能之间取得平衡。
2）React 以函数式编程为核心，凭借 JSX 和虚拟 DOM 提供极高的灵活性，适合复杂交互场景。
3）Angular 是全功能的企业级框架，强类型和依赖注入适合大型团队协作。