Vue 面试题

共 25 道 Vue 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。

掌握度统计加载中…
JavaScript 核心CSS 与布局TypeScript浏览器与网络工程化与构建React 进阶Vue 进阶状态管理Next.jsNuxt.jsSSR / SSG 原理微前端算法Node.js
掌握度：
01

Vue3 Composition API 和 Options API 的区别？为什么要有 Composition API？

Options API（选项式） Composition API（组合式） 为什么需要 Composition API 1. 逻辑复用更灵活 Options API 的复用靠 mixin，有命名冲突、…

★★☆
02

Vue3 中 ref 和 reactive 的区别？什么时候用哪个？

ref 将 任何类型 的值变成响应式，通过 .value 访问。 reactive 将 对象 变成响应式（Proxy 代理），直接访问属性。 核心区别 特性 ref reactive ------ -…

★★☆
03

Vue3 响应式系统的原理是什么？和 Vue2 有什么区别？

Vue3 响应式原理 Vue3 使用 Proxy 实现响应式，核心流程： reactive 实现（简化版） effect 实现 ref 实现 Vue2 vs Vue3 特性 Vue2 (Object.…

★★★
04

Vue3 中 computed、watch、watchEffect 的区别？

computed（计算属性） 基于其他响应式数据派生新值， 有缓存 ，只有依赖变化时才重新计算。 watch（侦听器） 监听响应式数据变化，执行副作用。 需要明确指定监听目标 ，有旧值和新值。 wat…

★★☆
05

Vue3 的生命周期钩子有哪些？和 Vue2 有什么变化？

Vue3 生命周期（Composition API） 完整流程 Vue2 vs Vue3 对比 Vue2 Vue3 (Composition API) 说明 ------ --------------…

★★☆
06

Vue3 组件通信有哪些方式？

1. Props / Emits（父子） 2. v-model（双向绑定） 3. provide / inject（跨层级） 4. ref（父调子方法） 5. mitt（事件总线） 6. Pinia（…

★★☆
07

Vue3 中插槽（Slot）有哪些类型？如何使用？

1. 默认插槽 2. 具名插槽 3. 作用域插槽（子传父数据） 4. 动态插槽名 5. 插槽默认内容 使用 useSlots() 实际应用：可复用表格组件

★★☆
08

Vue 中 keep-alive 的作用和使用方式？

<keep-alive 用于缓存组件实例，避免重复渲染，保留组件状态。 基本用法 属性 生命周期 被 keep-alive 缓存的组件有额外的生命周期： 实际应用 1. 列表页 → 详情页 → 返回列…

★★☆
09

Vue 中 nextTick 的作用是什么？原理是什么？

作用 Vue 的 DOM 更新是 异步 的（批量处理），nextTick 用于在 DOM 更新完成后执行回调。 为什么需要 nextTick Vue 将数据变化后的 DOM 更新放到 微任务队列 中批…

★★☆
10

Vue 中自定义指令如何编写？有哪些常用场景？

自定义指令 指令钩子 binding 对象 常用自定义指令示例 1. v-loading（加载中） 2. v-debounce（防抖点击） 3. v-permission（权限控制） 4. v-cop…

★★☆
11

Vue 的虚拟 DOM Diff 算法是怎样的？

Vue Diff 策略 Vue 的 Diff 算法基于 同层比较 ，使用 双端比较 （Vue2）和 最长递增子序列 （Vue3）优化。 Vue2 双端比较 使用 4 个指针：旧头、旧尾、新头、新尾 V…

★★☆
12

在 Vue3 中如何实现亮色 / 暗色主题切换？

Vue3 同样推荐「 CSS 变量 + 根节点 class + provide/inject 」。 1. CSS 变量定义主题（同 React 思路） 2. 用 Composition API + p…

★★☆
13

Vue Router 的导航守卫有哪些？如何实现登录权限控制？

守卫分三类： - 全局 ：beforeEach（最常用，做权限）、beforeResolve、afterEach（不拦截，做埋点） - 路由级 ：在路由配置里写 beforeEnter - 组件级 ：…

★☆☆
14

Vue Router 的 history 模式与 hash 模式区别？路由懒加载怎么做？

- hash 模式 ：URL 带 ，如 /foo /bar，改动不刷新、不请求服务器，兼容好、无需服务端配置 - history 模式 ：URL 干净（/foo/bar），但刷新/直接访问会 404，…

★☆☆
15

Vue 的 Teleport 是什么？解决什么场景？

<Teleport 把组件内部的 DOM 渲染到 DOM 树的其它位置 （如 body 末尾），但 逻辑/状态仍属于原组件 。 典型场景 ： - 全局弹窗 / Toast / 抽屉：避免被父级 ove…

★★☆
16

Vue 的 <Transition> 如何做进出场动画？有哪些钩子和类名？

<Transition 给 单个元素/组件 的插入、更新、移除自动添加 CSS 过渡类名： 多个元素用 <TransitionGroup （需 key）。也可配合 JS 钩子 @enter / @le…

★★☆
17

如何写一个 Vue 自定义指令（directive）？常用钩子有哪些？

指令是复用 DOM 底层行为的手段（如自动聚焦、权限控制、懒加载）。 钩子 ：created / beforeMount / mounted / beforeUpdate / updated / be…

★★☆
18

mixins 和 composables 有什么区别？为什么 Vue3 推荐组合式函数？

mixins（Vue2 遗产） ： - 多个 mixin 的同名选项会 合并 （data 浅合并、方法覆盖），来源不清晰 → 命名冲突、来源难追溯（"属性从哪来"） - 不接收参数，复用性差 comp…

★★☆
19

Vue 的 provide / inject 怎么用？有什么坑？

provide/inject 实现 跨层级 传递（祖先 → 后代），跳过中间的 props 透传。 坑 ： 1. 不是响应式透传的银弹 ：provide 普通值，后代改了祖先感知不到；要响应式必须 p…

★★☆
20

Vue 组件之间有哪些通信方式？分别适用什么场景？

选型原则 ： - 简单的父子 → props/emits - 中型应用共享状态 → Pinia（比 Vuex 轻、API 简单） - 跨多层级且局部 → provide/inject - 一次性结构复…

★★☆
21

Vue2 和 Vue3 的响应式原理有何不同？为什么 Vue3 用 Proxy？

- Vue2 ：用 Object.defineProperty 递归劫持每个属性的 get/set。 缺陷 ：① 数组索引/长度变化监听不到（需重写数组方法）；② 新增/删除属性需 Vue.set；③…

★★★
22

Vue3 做了哪些编译期/运行时性能优化？

编译期（模板编译） ： - PatchFlag ：编译时给动态节点打标记（如 TEXT、CLASS），diff 时只比对打了标记的部分，跳过静态节点 - 静态提升（hoistStatic） ：把静态节…

★★★
23

Vue 的异步组件和 Suspense 怎么用？

异步组件 ：用 defineAsyncComponent 懒加载，常配合 loading/error 状态： Suspense ：等待其下「异步 setup / async 组件」就绪后再渲染，提供 …

★★☆
24

Vue3 <script setup> 里的 defineProps / defineEmits / defineExpose 分别做什么？

这三个是 <script setup 的 编译器宏 （无需 import，编译期处理）： - defineProps：声明接收的 props（类型 + 默认值），返回一个对象可直接解构（需用 toRe…

★★☆
25

SPA 中：首页加载帖子列表，点击某帖跳转详情页（URL 变化），点击浏览器后退返回首页时，如何让列表内容保持原状、无需重新请求也无需重新渲染？请从路由机制、组件缓存、滚动恢复三方面说明原理，并分别给出 Vue 与 React 的实现。

核心矛盾：SPA 路由切换本质是 组件卸载/挂载 。默认情况下返回列表页 = 重新 mount = 重新发请求、重新渲染、滚动回到顶部。要做到"原样保留"，需要 三件套 ：组件实例缓存 + 数据状态外…

★★☆