我的知识库

Appearance

Vue3 高频面试题体系（前端面试复习版） ​

目标：按照真实前端面试的高频方向，系统化复习 Vue3。

适合：

  • Vue3 前端开发
  • 准备前端面试
  • 想从“会用 Vue”提升到“理解 Vue”

建议学习方式：

  1. 学完一个模块后自己复述
  2. 使用 AI 继续深挖
  3. 一定要结合真实项目
  4. 不要死记硬背

一、Vue3 基础核心（必问） ​

这一部分几乎所有 Vue 面试都会问。

1. Vue3 相比 Vue2 有什么提升 ​

高频问题 ​

  • Vue3 为什么更快
  • 为什么重写
  • Proxy 为什么比 defineProperty 好
  • Composition API 为什么出现

核心点 ​

  • Proxy
  • Tree Shaking
  • Composition API
  • 更好的 TypeScript 支持
  • 编译优化
  • PatchFlag
  • 静态提升

深挖方向 ​

  • Vue2 为什么数组监听有问题
  • 为什么 Vue2 需要 $set
  • Proxy 能监听哪些操作

2. Composition API ​

高频问题 ​

  • 为什么使用 Composition API
  • 和 Options API 区别
  • setup 执行时机
  • setup 为什么没有 this
  • <script setup> 做了什么

核心点 ​

  • 逻辑复用
  • 更好的类型推导
  • 避免 options 横向拆分

深挖方向 ​

  • setup 比 beforeCreate 还早
  • 编译时宏
  • defineProps 原理

二、响应式原理（核心重点） ​

这一块是 Vue 面试的核心中的核心。

不会响应式，很难算真正理解 Vue3。

1. reactive 和 ref 区别 ​

必会问题 ​

  • 为什么有 ref
  • ref 为什么要 .value
  • reactive 为什么不能直接赋值
  • reactive 和 ref 如何选择

核心点 ​

  • reactive 基于 Proxy
  • ref 基于 getter/setter
  • primitive 类型问题
  • 自动解包

深挖方向 ​

  • ref 为什么还能响应式
  • shallowRef
  • triggerRef
  • customRef

2. Vue3 响应式原理 ​

必会内容 ​

  • track
  • trigger
  • effect
  • WeakMap
  • dep
  • 依赖收集
  • 派发更新

必须理解的数据结构 ​

js
WeakMap => Map => Set

AI 深挖建议 ​

text
请从源码角度讲解 Vue3 的响应式原理

3. computed ​

高频问题 ​

  • computed 和 watch 区别
  • computed 为什么有缓存
  • dirty 标记
  • lazy effect

深挖方向 ​

  • computed 是同步还是异步
  • computed 为什么不能做异步

4. watch 和 watchEffect ​

高频问题 ​

  • watch 和 watchEffect 区别
  • immediate
  • deep
  • flush
  • cleanup

深挖方向 ​

  • watch 为什么能拿 oldValue
  • watchEffect 为什么不能
  • flush: post/pre/sync

三、生命周期（高频） ​

1. Vue3 生命周期变化 ​

高频问题 ​

  • beforeDestroy 改成什么
  • destroyed 改成什么

核心点 ​

  • beforeUnmount
  • unmounted

2. setup 和生命周期关系 ​

高频问题 ​

  • setup 执行时机
  • setup 能不能访问 data
  • setup 和 created 谁先执行

3. keep-alive 生命周期 ​

高频问题 ​

  • activated
  • deactivated

真实项目特别爱问。

四、组件通信（高频） ​

1. 父子通信 ​

必会内容 ​

  • props
  • emits
  • defineExpose

深挖方向 ​

  • props 为什么只读
  • emit 为什么要声明

2. v-model 原理 ​

Vue3 重点 ​

js
modelValue
update:modelValue

深挖方向 ​

  • 多 v-model
  • v-model 修饰符

3. provide / inject ​

高频问题 ​

  • 响应式问题
  • 使用场景

4. 跨组件通信 ​

高频内容 ​

  • mitt
  • pinia
  • provide/inject

深挖方向 ​

  • 为什么 Vue3 去掉 EventBus

五、组件渲染与 Diff（中高级重点） ​

这一块是中高级分水岭。

1. 虚拟 DOM ​

高频问题 ​

  • 为什么需要虚拟 DOM
  • 虚拟 DOM 比真实 DOM 快吗

正确理解 ​

不一定更快，而是更可控。

2. Diff 算法 ​

必会内容 ​

  • 同层比较
  • key
  • 双端 diff
  • 最长递增子序列（LIS）

深挖方向 ​

  • 为什么不能用 index 当 key
  • 为什么 key 可以提升性能

3. PatchFlag ​

高频内容 ​

  • 编译优化
  • 动态节点标记

4. 静态提升 ​

高频内容 ​

  • hoistStatic

六、Vue3 编译原理（高级） ​

1. template 到 render 过程 ​

核心流程 ​

text
template
-> AST
-> transform
-> generate
-> render

2. 为什么 Vue3 更快 ​

必会内容 ​

  • Block Tree
  • PatchFlag
  • 静态提升

七、性能优化（真实项目高频） ​

1. Vue 性能优化方案 ​

高频内容 ​

  • 路由懒加载
  • keep-alive
  • v-show/v-if
  • computed 缓存
  • 大列表优化
  • 虚拟列表

2. 大列表优化 ​

高频内容 ​

  • 虚拟列表
  • 分页
  • 懒加载

3. watch 性能问题 ​

深挖方向 ​

  • deep watch 性能
  • 无限递归更新

八、Pinia（Vue3 高频） ​

现在基本属于必问内容。

1. Pinia vs Vuex ​

高频内容 ​

  • 去 mutation
  • TS 更友好
  • 模块天然拆分

2. Pinia 响应式原理 ​

高频问题 ​

  • store 为什么是响应式

3. 持久化 ​

真实项目 ​

  • localStorage
  • pinia-plugin-persistedstate

九、路由（真实项目高频） ​

1. Vue Router 原理 ​

高频问题 ​

  • hash vs history
  • history 为什么需要服务端支持

2. 动态路由 ​

高频内容 ​

  • addRoute
  • 权限控制

3. 路由守卫 ​

高频内容 ​

  • beforeEach
  • beforeResolve
  • afterEach

深挖方向 ​

  • next 为什么容易出问题
  • Vue Router 4 为什么弱化 next

十、工程化（Vue3 面试越来越多） ​

1. Vite 原理 ​

高频内容 ​

  • ES Module
  • 为什么冷启动快
  • 预构建
  • HMR

真实问题 ​

  • optimizeDeps
  • .vite 缓存
  • Outdated Optimize Dep

2. Vite 和 Webpack 区别 ​

高频内容 ​

  • 开发阶段
  • 构建阶段

十一、SSR / SEO（加分项） ​

1. CSR vs SSR ​

高频内容 ​

  • 首屏
  • SEO

2. hydration ​

中高级重点 ​

  • 服务端 HTML 激活

十二、源码级（高级面试） ​

1. effect 实现 ​

2. scheduler ​

3. nextTick 原理 ​

高频内容 ​

  • 微任务
  • Promise.then

4. 异步更新队列 ​

十三、真实项目问题（最重要） ​

现在很多面试不只是八股。

而是：

你在项目里真正做过什么。

1. 权限系统 ​

必须重点准备 ​

  • 动态路由
  • RBAC
  • 按钮权限
  • 菜单权限

2. 登录方案 ​

高频内容 ​

  • token 刷新
  • 单点登录
  • iframe 授权

3. 性能优化案例 ​

必须准备 ​

  • 你真正做过什么优化
  • 数据指标
  • 优化前后

十四、面试官最爱“连续深挖”的问题 ​

Vue3 响应式 ​

text
reactive 和 ref 区别
↓
为什么 ref 需要 value
↓
track trigger 原理
↓
WeakMap 为什么用 WeakMap
↓
computed 为什么有缓存
↓
watchEffect 为什么没有 oldValue

Diff ​

text
为什么 key 重要
↓
为什么不能用 index
↓
Vue3 diff 优化了什么
↓
LIS 是什么

Vite ​

text
为什么快
↓
为什么不打包
↓
预构建是什么
↓
为什么用 esbuild
↓
HMR 为什么快

十五、推荐复习顺序（非常重要） ​

第一阶段（必须掌握） ​

  • Composition API
  • reactive/ref
  • watch/computed
  • 生命周期
  • 组件通信

第二阶段（中高级） ​

  • diff
  • 虚拟 DOM
  • PatchFlag
  • nextTick
  • scheduler

第三阶段（工程化） ​

  • Vite
  • 性能优化
  • 路由权限

第四阶段（源码） ​

  • effect
  • track
  • trigger
  • AST
  • 编译原理

十六、最有效的 AI 复习方式（推荐） ​

方法1：深挖模式 ​

text
请连续深挖 Vue3 响应式，直到源码级

方法2：面试模式 ​

text
你现在是高级前端面试官，请面试我 Vue3，一次只问一个问题

方法3：项目模式 ​

text
请结合后台管理系统场景，讲 Vue3 权限控制

方法4：源码模式 ​

text
请手写简易版 reactive

十七、你当前最该重点突破的方向（结合你的技术栈） ​

第一优先级 ​

  • Vue3 响应式
  • watch/computed
  • diff
  • nextTick

第二优先级 ​

  • Vite
  • 工程化
  • 缓存
  • optimizeDeps

第三优先级 ​

  • 动态路由
  • 权限系统
  • 登录授权

这些都非常接近真实企业项目场景。

十八、推荐你的复习节奏（非常建议） ​

每天学习结构（1~2 小时） ​

第一阶段：学习（30 分钟） ​

学习一个核心模块。

例如：

  • reactive/ref
  • diff
  • Vite

第二阶段：深挖（30 分钟） ​

使用 AI 深挖：

text
继续深挖
text
从源码角度解释
text
真实项目中会遇到什么问题

第三阶段：输出（30 分钟） ​

一定要自己讲。

例如：

text
我来回答，你帮我评分

面试最重要的是：

能清晰表达。

十九、最终目标 ​

最终你要达到的不是：

“我看过 Vue3”

而是：

  • 能讲原理
  • 能讲设计原因
  • 能讲真实项目
  • 能抗住连续追问
  • 能从源码角度解释问题

这样你在中高级前端面试中会非常有竞争力。

基于 Obsidian + VitePress 构建

MIT License