Vue前端面试准备

前言

面试 Vue 岗位，最忌讳两种极端：只背基础题（够不到中高级），或一上来硬啃源码（地基不稳）。本文按”基础篇 → 进阶篇 → 高级篇 → 冲刺篇“四阶段组织：基础弱的先在第一阶段把语法、JS 基础和数组方法打牢，再进入 3-5 年面试要求的原理、优化与系统设计；进阶篇附知识点串联线教你把零散考点串成体系讲；冲刺篇给高频问答速查表和零面试经验的面试技巧专项。每个知识点都同时配文档链接、视频链接和通俗解析链接（帮你说出来）：官方文档难啃的不用急，先照通俗解析开口复述建立表达，再读文档建框架、看视频补理解，照着步骤过即可。

正文

复习路线总览

阶段	主题	耗时建议	对应目标
基础篇	JS 基础 + 数组方法 + Vue3 核心语法 + 组件通信 + TS 入门	2~3 周	初级/简历不虚
进阶篇	JS 深度 + 响应式源码 + 编译 diff + 新特性 + 知识串联	2~3 周	3-5 年核心考点
高级篇	性能优化 + 生态微前端 + 系统设计	2 周	定级加分
冲刺篇	高频问答速查 + 面试技巧 + 模拟面试	到面试前	临场发挥

怎么用本文复习：每节的”知识点/问题”表格都配了 解析链接（帮你说出来） 一列——官方文档较难啃的暂时保留，先照通俗解析链接开口复述一遍（哪怕念稿），再说给墙或录音听；哪档的知识点答不上来就从哪档开始，跳级复习是面试崩盘的最大原因。

---

第一阶段：基础篇（水平一般先从这里开始）

1. JavaScript 基础

Vue 面试一半时间在问 JS，基础不牢后面全是空中楼阁：

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
变量与作用域	var/let/const、作用域链、闭包	闭包与作用域面试题解析（掘金）	现代 JS 教程·变量 / 现代 JS 教程·闭包	尚硅谷 JS 高级（B 站空间搜”JS 高级”）
this 指向	四种绑定规则、箭头函数不绑定 this	JS 运行时：执行上下文与 this 可推导讲法（个人博客）	现代 JS 教程·对象方法与 this	coderwhy JS 高级系列
原型与原型链	__proto__/prototype、属性查找	原型链/闭包/事件循环深度解析 + 手写（掘金）	现代 JS 教程·原型继承	尚硅谷 JS 高级
ES6+ 语法	解构、箭头函数、扩展运算符、模块化	阮一峰 ES6 白话教程·目录（哪节不会点哪节）	阮一峰·解构赋值 / 阮一峰·函数扩展(箭头/rest/扩展) / 阮一峰·Module	黑马 ES6 教程（B 站搜”黑马 ES6”）
异步入门	Promise 状态与链式调用、async/await	现代 JS 教程·async/await（先照这篇复述，文档列同款口语教程）	现代 JS 教程·Promise / 现代 JS 教程·async/await	coderwhy Promise 专题
事件循环	宏任务/微任务顺序	一文彻底搞懂 JS 事件循环与宏微任务（掘金）	MDN 并发模型与事件循环	什么是 Event Loop（JSConf 经典演讲）
基础自查	10 条清单定位薄弱点	前端面试宝典（interview.poetries.top，按模块逐条自查）	本站：前端应注重的基础知识	——

2. 数组方法专题（手写题重灾区）

数组方法是手写题的高频来源，也是串联 Vue 响应式的经典素材：

变异 vs 非变异方法（面试常考”哪些方法会改变原数组”）：

分类	方法	说明
变异（改原数组）	push / pop / shift / unshift / splice / sort / reverse	共 7 个，Vue2 专门重写了它们
非变异（返回新数组）	map / filter / concat / slice / flat / flatMap	链式调用首选
查找类	find / findIndex / indexOf / includes / some / every	返回元素、索引或布尔
归并类	reduce / reduceRight	手写题之王，注意初始值参数

高频手写题与思路：

手写题	核心思路	解析链接（帮你说出来）
手写 map	遍历 this，把 fn(v, i, this) 的结果 push 进新数组返回	现代 JS 教程·数组方法（map 小节）
手写 filter	同上，fn 返回真值才 push	数组高阶函数 map/filter/reduce 深入（CSDN）
手写 reduce	累加器 acc；无初始值时取第一项起步	数组方法 map/filter/reduce 高级用法（PHP 中文网）
数组去重	[...new Set(arr)] / filter + indexOf / reduce + includes	数组高频面试题：去重/扁平化/排序最全方案（CSDN）
数组扁平化	flat(Infinity) / 递归 / reduce + concat	手写数组扁平化 5 种方法（掘金，附图解）
类数组转数组	Array.from / [...arguments] / slice.call	MDN·Array.from（中文示例，照着敲一遍）

与 Vue 的关联（必考追问）：

• Vue2 为什么重写那 7 个变异方法：defineProperty 拦截不到通过原型调用的方法，Vue2 把数组原型指向拦截后的原型，调用 push/splice 时手动触发更新 → Vue2 列表渲染·数组变更检测
• 经典追问：this.arr[0] = xx 视图为什么不更新？→ 索引赋值 defineProperty 拦截不到；用 splice(0, 1, xx) 或 Vue.set。Vue3 的 Proxy 无此问题（set trap 能拦截索引赋值）→ Vue3 列表渲染
• v-for 中 key 为什么不能用 index：增删元素时 index”错位复用”，导致状态串行（输入框内容错乱是经典案例）
• 通俗版（照着讲）：为什么 push 能触发更新而 arr[0] = xx 不行、Vue3 的 Proxy 又是怎么解决的 → 深入浅出 Vue 响应式：从 defineProperty 到 Proxy（CSDN）

资源	链接
MDN 数组方法	developer.mozilla.org Array
现代 JS 教程·数组方法	zh.javascript.info/array-methods
Vue2 数组变更检测	Vue2 官方·列表渲染
Vue3 列表渲染	Vue3 官方·列表渲染
手写题视频	coderwhy JS 高级（空间内搜”手写”）
数组方法视频	尚硅谷 JS 高级（数组章节）

3. Vue3 核心语法

必须张口就来的基础题：

问题	答题要点	解析链接（帮你说出来）
v-if 与 v-show？	删改 DOM vs display 切换；频繁切换用 v-show	v-if 与 v-show 区别与场景（知乎）
computed 与 watch？	缓存求值 vs 侦听副作用；computed 不改数据	computed 和 watch 彻底搞懂（知乎）
key 的作用？	标识节点复用，避免错位渲染，不能用 index（有增删时）	Vue3 Diff + PatchFlags 结构化答题（掘金，key 怎么讲看这篇）
v-model 原理？	:value + @input 语法糖；组件上是 modelValue/update:modelValue	深入解析 Vue 的 v-model（知乎）
生命周期顺序？	setup → onBeforeMount → onMounted → … → onUnmounted；请求放 onMounted	八股文通关：彻底搞懂 Vue 生命周期（知乎）

每个知识点的文档与视频：

知识点	解析链接（帮你说出来）	文档链接	视频链接
模板语法与响应式基础	深入浅出 Vue 响应式：从 defineProperty 到 Proxy（CSDN）	官方·模板语法 / 官方·响应式基础	尚硅谷 Vue3 入门到实战
计算属性与侦听器	computed 和 watch 彻底搞懂（知乎）	官方·计算属性 / 官方·侦听器	黑马 Vue 全套（Vue2+Vue3）
条件与列表渲染	v-if 与 v-show 区别与场景（知乎）（条件部分；列表 key 见”基础题”表）	官方·条件渲染 / 官方·列表渲染	尚硅谷 Vue3（对应章节）
事件处理与表单	v-model 原理超详细（简书）	官方·事件处理 / 官方·表单绑定	黑马 Vue 全套
生命周期	Vue 生命周期详细全过程（CSDN，附图解）	官方·生命周期钩子	尚硅谷 Vue3（生命周期章节）
语法速查	——（速查型知识点无通俗专文，列内官方 API 索引即速查本体）	官方·API 索引（指令/选项/内置组件按模块速查）	Vue 官方互动教程（边看边练）
综合检验	2025 Vue3 面试题 50+（掘金，检验覆盖率）	官方互动教程	黑马小兔鲜电商实战（全家桶落地）

4. 组件通信全家桶

通信方式	适用场景	解析链接（帮你说出来）	文档链接	视频链接
props / emit	父子通信（最常用）	组件通信·面试全面应答版（掘金）	官方·Props / 官方·组件事件(emit)	尚硅谷 Vue3（组件章节）
v-model 双向绑定	表单组件、弹窗 visible	深入解析 Vue 的 v-model（知乎）	官方·组件 v-model	黑马小兔鲜（自定义组件实战）
provide / inject	跨层级注入	provide/inject 详解：实现跨组件通信（CSDN）	官方·依赖注入	黑马 Vue 全套（对应章节）
插槽 slot	父传子传”模板内容”	Vue 插槽终极学习比较指南（博客园）	官方·插槽	尚硅谷 Vue3（插槽章节）
mitt / 事件总线	任意组件通信	Vue3 使用 Mitt 替代 EventBus（知乎）	mitt 官方仓库	黑马小兔鲜（组件封装实战）
Pinia	全局状态	Vuex 与 Pinia 区别（CSDN 面试高频）	Pinia·定义 Store	小满zs B 站空间（Pinia 章节）
$refs	父调子方法	Vue3 父子组件相互调用方法（掘金，defineExpose 示例）	官方·模板引用	黑马 Vue 全套（对应章节）

5. 组合式 API 与 TypeScript 入门

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
<script setup>	顶层变量自动暴露给模板	script setup 语法糖最全教程（技术栈站，零基础）	官方·script setup	尚硅谷 Vue3（组合式 API 章节）
常用组合式函数	ref/reactive/computed/watch/watchEffect	面试官：讲下 ref 和 reactive 的区别（知乎）	官方·响应式核心(ref/reactive) / 官方·计算与侦听(computed/watch)	小满zs B 站空间（Vue3 系列）
组合式函数（Hooks）	逻辑复用、自定义 useXxx	Vue3 Hooks 是什么？与普通函数/封装的区分（CSDN）	官方·组合式函数	黑马小兔鲜（hooks 实战）
TS 基础	类型标注、interface、泛型入门	TypeScript 官方中文手册（入门部分）	小满zs TS 系列（图文）	小满 TypeScript 教程全集
TS 与 Vue	defineProps<T>() 泛型写法	script setup 详解 defineProps/defineEmits（掘金）	官方·组合式 API 的 TypeScript	尚硅谷 Vue3+TS（同为 BV1Za4y1r7KE）

---

第二阶段：进阶篇（3-5 年面试核心战场）

6. JS 深度

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
事件循环进阶	渲染帧与 rAF、await 续体是微任务	一文彻底搞懂 JS 事件循环与宏微任务（掘金）	本站：前端高频题库	事件循环硬核讲解
内存管理	V8 垃圾回收、Vue 内存泄漏场景	Chrome V8 垃圾回收与内存泄漏（CSDN）	现代 JS 教程·垃圾回收	coderwhy JS 高级（内存管理章节）
异步进阶	手写 p-limit、AbortController 取消请求	异步并发控制：并发池/竞态防护/请求取消（技术栈站）	MDN AbortController	coderwhy 手写 Promise 系列
深浅拷贝	手写深拷贝（WeakMap 处理循环引用）	从 Object.assign 到手写深拷贝·面试官视角（掘金）	现代 JS 教程·对象引用复制	尚硅谷 JS 高级（深拷贝章节）
手写题集	防抖节流/call/apply/new/Promise	8 个高频 JS 手写题全解析（掘金）	本站：前端应注重的基础知识	coderwhy 面试手写题系列

7. Vue3 响应式原理（源码级）

3-5 年定级题的核心，要能白板画出完整链路：

完整链路：reactive(obj) 用 Proxy 代理对象 → effect(fn) 首次执行触发 getter → track 以 targetMap → depsMap → dep(Set) 三层结构收集依赖 → 数据变更触发 setter → trigger 重新执行 effect → 通过微任务队列批量异步刷新。

高频追问清单：

问题	答题要点	解析链接（帮你说出来）	深入文档	视频
Proxy 与 defineProperty 区别？	懒代理 vs 递归初始化；能监听增删/数组索引	白话版：Vue3 为什么弃用 defineProperty（技术栈站，附可运行案例）	官方·深入响应式系统	coderwhy Vue3 源码
ref 为什么要 .value？	基本类型无法被 Proxy 代理，getter/setter 拦截；ref(obj) 内部调 reactive	ref 为什么用 .value（对话式讲解，CSDN）	官方·响应式基础(ref 与 .value) / 图解 Vue3 源码（腾讯云）	coderwhy Vue3 源码（ref 章节）
computed 缓存原理？	dirty 标志位 + 取值才重算	computed 和 watch 彻底搞懂（知乎，含缓存原理讲解）	官方·计算属性(缓存机制)	小满zs（源码浅谈系列）
watch 与 watchEffect？	显式声明源 vs 自动收集依赖	一篇文章学透 watch 与 watchEffect 的区别（掘金）	官方·侦听器(watchEffect 对比)	尚硅谷 Vue3（watch 章节）
effect 嵌套？	栈维护 activeEffect	Vue3 响应式原理全流程：依赖收集与触发更新（掘金）	官方·深入响应式系统(嵌套 effect 与调度)	coderwhy Vue3 源码
nextTick 原理？	Promise.resolve().then，批量刷新	nextTick 图解原理（事件循环视角，CSDN）	官方 API·nextTick	黑马 Vue 全套（nextTick 章节）

8. 编译优化与 diff 算法

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
PatchFlags	编译器给动态节点打标志，只 diff 动态部分	Vue3 编译优化揭秘：静态提升与 PatchFlags（掘金）	官方·渲染机制	coderwhy Vue3 源码（编译优化章节）
静态提升	静态节点提到 render 外复用	编译器优化实战：从静态提升到 PatchFlag（个人博客）	官方·渲染机制	coderwhy Vue3 源码
Block Tree	动态节点扁平化，diff 不全树递归	Vue3 Block Tree 详解（掘金，源码图文）	图解 Vue3 源码（腾讯云）	小满zs（源码浅谈系列）
diff 算法	头尾双指针 + key 复用	Vue3 Diff + PatchFlags 结构化答题（掘金）	Vue3.0 Diff 算法深度探查（知乎）	coderwhy Vue3 源码（diff 章节）
最长递增子序列（LIS）	最小化 DOM 移动，重要加分项	——（暂无独立通俗专文；文档列掘金详解已是大白话 + 完整代码，照着画一遍即可）	vue3.0 diff 算法详解（掘金）	coderwhy Vue3 源码
虚拟 DOM	VNode 结构与渲染函数	面试必懂！虚拟 DOM 到底是个啥（CSDN，生活化例子）	官方·渲染机制(虚拟 DOM 是什么) / 官方·渲染函数	尚硅谷 Vue3（虚拟 DOM 章节）

9. Vue3.5 / 3.6 新特性（拉开差距的一步）

知识点	要点	官方公告/文档	解析链接（帮你说出来）	视频链接
响应式 Props 解构（3.5）	解构后保持响应式，官方修复著名”坑”	官方 3.5 发布公告	Vue 3.5 新特性盘点 + 使用感受（掘金，含 Props 解构实战）	小满zs（3.5 新特性动态，B 站搜”小满 Vue3.5”）
useTemplateRef（3.5）	模板引用与变量名解耦、类型推断	官方 API·script setup（查 useTemplateRef 用法）	useTemplateRef 实战（掘金） / useTemplateRef 源码解析（掘金）	——
响应式内存优化（3.5）	内存占用降 ~56%	官方 3.5 发布公告	Vue 3.5 升级指南：性能飞跃（掘金）	——
Vapor Mode（3.6）	无虚拟 DOM 编译模式，当前最热话题	——	Vapor Mode 深度解析（掘金）	尤雨溪 Vue 3.6 发布演讲纪要（掘金）
Vue 3.6 全景	2026-07 正式发布 + Vue 4.0 启动	——	Vue 3.6 RC 解读（知乎）	尤雨溪 Vue&ViteConf 2026 现场纪要

10. 知识点串联：把零散考点串成线

单点答题只能拿及格分，串成线讲才能体现 3-5 年应有的体系感。面试官问 A，你答到 B 和 C，就是”有体系”的信号。

串联线一：一次数据变更的完整旅程（Vue3 原理主线）

修改 count.value
  → trigger 触发依赖（targetMap 找到 effect）
  → 调度器把组件更新任务放入微任务队列（同 tick 多次修改只刷一次）
  → 事件循环清空调用栈，执行刷新任务
  → 组件重新 render 生成新 VNode
  → patch 新旧 VNode（Block Tree 只比动态节点，PatchFlags 决定更新类型）
  → diff 复用/移动/创建真实 DOM
  → nextTick 回调在此之后执行，能拿到最新 DOM

一句话版：”数据变更 → 依赖触发 → 微任务批量调度 → render → patch(diff) → DOM 更新 → nextTick“。这条线串起响应式、事件循环、diff、nextTick 四个大考点，对着流程图讲三遍。

串联线二：从输入 URL 到页面渲染（网络 + 浏览器主线）：DNS → TCP → HTTP（强缓存/协商缓存在这里生效）→ HTML 解析 → DOM/CSSOM → 渲染树 → 布局绘制 → defer/async 脚本 → 事件循环驱动交互。串起网络、浏览器渲染、性能优化三大块。

串联线三：闭包 → 模块化 → 组合式函数：闭包让函数记住外部变量 → ES Module 靠作用域实现封装导出 → Vue 组合式函数本质就是”返回闭包的函数”（useXxx 内的 ref 被 return 出去的函数引用着）。被问闭包时主动带到 hooks，是漂亮的加分动作。

串联线四：数组 → 响应式数组 → 虚拟列表：数组方法（map/filter）→ Vue 对数组的响应式处理（Vue2 重写 7 个变异方法 / Vue3 Proxy 拦截索引赋值）→ 大数组渲染优化（v-memo / 虚拟滚动）。从语法聊到原理再聊到性能，一条线打穿三层。

串联线五：v-model → 组件通信 → 表单组件设计：语法糖原理 → modelValue/update:modelValue → 封装带校验的 FormInput 需要 props/v-model/插槽/expose 配合。从 API 用法聊到组件设计。

串联答法示范——面试官问”Vue3 为什么比 Vue2 快？”（口语版）：

“我从四个层面说：编译时，编译器给动态节点打 PatchFlags、静态提升，运行时只 diff 动态部分；运行时，响应式从 defineProperty 换成 Proxy，懒代理不用递归初始化；算法层，Block Tree 扁平化收集动态节点，配合最长递增子序列减少 DOM 移动；工程层，基于 ESM 天然支持 Tree-shaking，按需打包体积更小。编译、运行时、算法、打包四端合力。”

练习方法：每条线对着空气讲 3 遍并录音回听，直到不看提示能完整讲完。深入材料直接复用第 7、8 节的源码文档/视频，以及各节表格里的解析链接——先用白话解析复述串联线，再回官方对照细节。

---

第三阶段：高级篇（定级加分项）

11. 性能优化实战

要能讲指标 → 定位 → 手段 → 量化收益的闭环，忌背清单：

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
性能指标	FCP/LCP/CLS/INP 采集	——（暂无贴切通俗专文，文档列官方中文页已较直白，配视频食用）	Google·Web Vitals（中文）	前端性能优化实战教程（2025）
首屏优化	路由懒加载、关键 CSS、CDN、分包	SPA 首屏慢排查清单（先诊断再优化，CSDN）	Vue 性能优化实战题解	两小时深入前端性能优化
运行时优化	v-memo、虚拟滚动、shallowRef、keep-alive	虚拟列表原理与实现·面试版（CSDN）（覆盖虚拟滚动；v-memo/shallowRef 见文档列官方页）	官方·性能优化指南	前端性能优化实战教程（2025）
keep-alive	组件缓存与 LRU 淘汰策略	面试官：keep-alive 缓存组件原理（web-interview 问答库）	官方·KeepAlive API	黑马 Vue 全套（keep-alive 章节）
打包优化	Tree-shaking、按需引入、构建分析	面试官：tree-shaking 的原理是什么？（掘金）	Vite 中文文档·构建选项	两小时深入前端性能优化

12. 生态工程化与微前端

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
Vue Router 4	导航解析流程、动态路由、Nginx fallback	Vue Router 核心全解：守卫/元信息/懒加载/动态路由（CSDN）	官方·动态路由匹配 / 官方·History 模式(Nginx 配置)	黑马小兔鲜（路由实战章节）
路由守卫	beforeEach 全流程、权限拦截	vue 导航守卫详解·面试向（CSDN）	官方·导航守卫	尚硅谷 Vue3（路由章节）
Pinia	替代 Vuex 的原因、持久化、跨 store 组合	Vuex 与 Pinia 高频面试对比（掘金）	官方·简介(对比 Vuex) / 官方·定义 Store	Pinia 分模块/持久化教程
Vite	原生 ESM + esbuild 预构建、与 webpack 对比	面试题：Vite 为什么比 Webpack 快·标准回答（掘金）	官方·为什么选 Vite(ESM/esbuild 预构建)	技术胖 Vite 从入门到精通
微前端	qiankun 沙箱、CSS 隔离、基座模式	5 年前端面经：微前端怎么答（CSDN）	qiankun 微前端完全入门指南（掘金）	qiankun 官方入门教程
微前端架构选型	各方案对比与适用场景	——（暂无独立通俗专文；文档列掘金方案对比 + 视频列面经实录可组答法）	微前端主流架构方案（掘金）	5 年前端面经（含微前端答法）

13. 系统设计与场景题（定级题）

知识点	要点	解析链接（帮你说出来）	文档链接	视频链接
设计前端监控系统	采集/上报/SourceMap 还原	前端监控体系搭建：错误/白屏/性能（知乎）	2026 前端面试趋势：场景化考察	前端性能优化实战（含监控指标）
设计权限系统	RBAC、路由级+按钮级+接口级	基于 RBAC 的前端权限管理实现（掘金，含路由守卫拦截示例）	本站：场景题万能框架	黑马小兔鲜（权限路由实战）
白屏排查	Network→Console→断点→二分定位	SPA 首屏/白屏排查清单（先诊断再优化，CSDN）	本站：场景题八连（含白屏）	两小时性能优化（含排查思路）
组件库设计	按需加载、主题定制、Monorepo	如何设计一个前端组件库（CSDN，设计思路拆解）	微前端架构方案（含 Monorepo）	coderwhy 组件封装思想（空间内搜）
场景题答法	澄清→拆解→方案→权衡→收尾	——（暂无贴切通俗专文；文档列本站框架 + 视频列面经实录即可组答案）	本站：说清原理与打磨项目	5 年前端面经（真实场景题实录）

---

第四阶段：冲刺篇

14. 高频问答速查表（考前一晚过一遍）

只写一句话要点；详细原理、文档与视频链接见上文对应章节。解析链接是”帮你说出来”的白话版，哪句说不利索就点开对应链接照讲一遍。

JavaScript 篇

问题	一句话答案	解析链接（帮你说出来）
var/let/const 区别？	var 提升无块级；let/const 块级 + 暂时性死区；const 引用不可变	var/let/const 核心区别（掘金）
什么是闭包？	函数记住并访问其词法作用域之外的变量	闭包与作用域面试题解析（掘金）
this 指向规则？	默认/隐式/显式(new)四种绑定；箭头函数继承定义处	执行上下文与 this 推导讲法（博客）
原型链查找？	沿 __proto__ 逐级向上，直到 Object.prototype（null）	原型链/闭包/事件循环深度解析（掘金）
事件循环机制？	调用栈清空 → 清空全部微任务 → 取一个宏任务，循环	一文彻底搞懂事件循环与宏微任务（掘金）
await 之后是什么任务？	微任务（相当于 then 回调）	现代 JS 教程·async/await（await 续体即微任务）
深浅拷贝区别？	浅拷贝复制一层引用；深拷贝递归 + WeakMap 防循环引用	从 Object.assign 到手写深拷贝（掘金）
箭头函数能 new 吗？	不能，无 this/arguments/prototype	箭头函数与普通函数区别详解（腾讯云）
防抖与节流？	防抖只执行最后一次；节流固定间隔最多一次	8 个高频 JS 手写题全解析（掘金，含防抖节流）
new 做了什么？	建对象 → 绑原型 → 执行构造函数绑 this → 返回对象	手写 new 终极指南（掘金）
数组去重？	[...new Set(arr)] 最简；filter+indexOf / reduce 也可	数组去重/扁平化最全方案（CSDN）
哪些数组方法改原数组？	push/pop/shift/unshift/splice/sort/reverse 共 7 个	现代 JS 教程·数组方法（逐方法讲原地/返回新数组）

Vue 篇

问题	一句话答案	解析链接（帮你说出来）
v-if 与 v-show？	删除重建 DOM vs display 切换；频繁切换用 v-show	v-if 与 v-show 区别与场景（知乎）
computed 与 watch？	computed 缓存派生值；watch 侦听执行副作用	computed 和 watch 彻底搞懂（知乎）
key 的作用？	diff 时标识节点复用；不能用 index（有增删时）	Vue3 Diff + PatchFlags 结构化答题（掘金）
v-model 原理？	:value + @input 语法糖；组件上是 modelValue 约定	深入解析 Vue 的 v-model（知乎）
ref 与 reactive？	ref 万物皆可（带 .value）；reactive 仅对象/数组	面试官：讲下 ref 和 reactive 的区别（知乎）
为什么要有 .value？	基本类型无法被 Proxy 代理，靠类的 getter/setter 拦截	ref 为什么用 .value（对话式讲解，CSDN）
nextTick 原理？	Promise.then 微任务，等批量 DOM 更新后再回调	nextTick 图解原理（事件循环视角，CSDN）
Vue2 与 Vue3 响应式差异？	defineProperty 递归且监听不到增删/索引 vs Proxy 懒代理全拦截	深入浅出 Vue 响应式：从 defineProperty 到 Proxy（CSDN）
生命周期顺序？	setup（替代 beforeCreate/created）→ onBeforeMount → onMounted → onBeforeUpdate → onUpdated → onBeforeUnmount → onUnmounted	Vue 生命周期详细全过程（CSDN，附图解）
组件通信方式？	props/emit、v-model、provide/inject、插槽、Pinia、mitt、$refs	组件通信·面试全面应答版（掘金）
keep-alive 原理？	缓存组件 VNode 实例（LRU 淘汰），命中跳过重建	面试官：keep-alive 缓存组件原理（问答库）
Pinia 相比 Vuex？	去掉 mutation、天然 TS、组合式风格、可拆多 store	Vuex 与 Pinia 高频面试对比（掘金）
hash 与 history 路由？	hash 用 # 不发请求；history 用 pushState 需后端 fallback	Vue Router 的 history 与 hash 模式详解（掘金）
watch 与 watchEffect？	watch 显式声明源、惰性、有旧值；watchEffect 立即执行自动收集依赖	一篇文章学透 watch 与 watchEffect 的区别（掘金）
Vue2 arr[0]=x 不更新？	索引赋值拦截不到；用 splice/Vue.set；Vue3 Proxy 无此问题	Vue2 数组响应式为何总”不更新”（知乎，源码对比 Vue3）
虚拟 DOM 是什么？	用 JS 对象描述真实 DOM，diff 后最小化更新	面试必懂！虚拟 DOM 到底是个啥（CSDN，生活化例子）

浏览器与网络篇

问题	一句话答案	解析链接（帮你说出来）
强缓存与协商缓存？	Cache-Control 直接用本地；ETag/Last-Modified 协商 304	深入解析强缓存和协商缓存，5 分钟全搞懂（掘金）
常见跨域方案？	CORS 响应头、开发代理、JSONP（仅 GET）、Nginx 反代	前端跨域解决方案全整理：CORS/JSONP/Nginx 代理（掘金）
XSS 与 CSRF？	XSS 注入脚本（转义/CSP）；CSRF 伪造请求（token/SameSite）	XSS 与 CSRF 攻击详解：原理剖析及实战防御（掘金）
重排与重绘？	几何变化引发重排（代价大）；外观变化只重绘	深入理解网页的回流与重绘（掘金）
从 URL 到页面？	DNS → TCP → HTTP → 解析 → 渲染树 → 布局 → 绘制	前端经典面试题：从 URL 输入到页面展示（掘金）
localStorage 与 cookie？	前者 5MB 纯前端；后者 4KB 随请求携带	localStorage/sessionStorage 与 Cookie 面试题深度解析（掘金）
常见状态码？	200 成功、301/302 重定向、304 缓存、401 未授权、404 不存在、500 服务端错误	HTTP 状态码全解析（含常见面试陷阱，掘金）

工程与性能篇

问题	一句话答案	解析链接（帮你说出来）
Vite 为什么快？	dev 原生 ESM 按需编译 + esbuild 预构建；生产 Rollup	面试题：Vite 为什么比 Webpack 快·标准回答（掘金）
Tree-shaking 原理？	基于 ESM 静态结构分析，删未引用导出	面试官：tree-shaking 的原理是什么？（掘金）
首屏优化思路？	先量化（LCP/FCP）再动手：懒加载、分包、CDN、SSR、图片压缩	SPA 首屏慢排查清单（先诊断再优化，CSDN）
虚拟列表原理？	只渲染可视区 + 缓冲区，滚动换算 startIndex/endIndex 补位	虚拟列表原理与实现·面试版（CSDN）
微前端解决什么？	大团队多技术栈共存、独立部署；代价是沙箱与通信复杂度	5 年前端面经：微前端怎么答（CSDN）

15. 面试流程与技巧专项（零面试经验必看）

① 自我介绍（1~2 分钟模板）：

基本信息（几年经验 + 技术栈）→ 项目经历（挑 1~2 个最有含金量的，一句话讲业务 + 你的职责 + 亮点成果）→ 求职意向。不要背简历，不要流水账。

② 项目介绍用 STAR 法则：情境（业务背景）→ 任务（你负责什么）→ 行动（怎么做的、遇到什么坑、怎么权衡）→ 结果（量化：性能提升 X%、包体积降 X%、覆盖 X 用户）。

③ 答题话术：

• 会答：先给结论，再讲原理，最后举例（”是 XX，原理是 XX，比如在我项目里……”）
• 不会：诚实说”这块我了解不深，我知道的是 XX，猜测和 XX 有关”——比硬编强十倍
• 被追问到底：到认知边界就停，”再往下的源码细节我没读过，入职后会补”是合格答案

④ 话题引导技巧（高阶）：

• 回答里”埋钩子”：”这里我在项目里踩过一个坑”——把面试官引向你准备好的内容
• 不会的题往会的领域引：”虚拟 DOM 源码细节我没读过，但它的 diff 思路我在性能优化里实践过……”
• 被问”最近关注什么新技术”时抛出 Vue 3.6 Vapor Mode（第 9 节内容），主动权立刻回到你手上

⑤ 必做模拟：对着镜子/录音把 20 道高频题口头说一遍。会写 ≠ 会说，第一次开口讲闭包和第 10 次完全不是一个水平。

⑥ 谈薪要点：

• 先问清结构：base × 几个月、绩效占比、五险一金基数、有无加班费
• 报期望给区间，下限是自己的心理价位；被压价用当前薪资/其他 offer 锚定
• 尽量不第一个报数，可以反问”想先了解岗位的薪资范围”

⑦ 线上面试注意：安静环境 + 耳机 + 提前 10 分钟测设备；共享屏幕前关通知和无关标签页；备纸笔记问题关键词，防止答跑题。

⑧ 反问环节准备 2 个问题：团队技术栈与业务方向、新人成长机制——体现求职诚意。

⑨ 心态管理：面试是双向选择，你也在考察团队；被挂多半是匹配度问题。每场结束 10 分钟内复盘记录被问倒的题，第二天补上——面 3 场后命中率肉眼可见地上升。

资源	类型	链接	说明
本站：前端面试的建议	文档	前端面试的建议	如何准备/技巧/注意事项/跳槽时机全套
本站：说清原理与打磨项目	文档	如何用自己的话说清原理与打磨项目	费曼学习法 + STAR + 场景题
知乎：3-5 年面试强度	文档	zhuanlan.zhihu.com/p/2038302192138965504	校准强度预期
2025 Vue3 面试题	文档	掘金 7458326985077587983	50+ 题，先刷基础部分
前端面试宝典	文档	interview.poetries.top	系统性最强，按模块刷
2026 Vue3 面试题汇总	文档	CSDN 145761361	通俗易懂版，查漏补缺
面试表达训练	视频	coderwhy 面试专题（空间内搜）	高频题口头表达示范
零基础入门串讲	视频	HTML+CSS+JS+Vue 零基础入门	查漏补缺用

复习节奏总建议

1. 水平一般 → 总周期 6~8 周：基础篇 23 周（不跳级）、进阶篇 23 周、高级篇 2 周、冲刺 1 周
2. 工作日 1~1.5 小时：文档为主、视频为辅（已掌握的视频 1.5~2 倍速，弱项精看）
3. 周末整块时间：手写代码（深拷贝/p-limit/数组方法/依赖收集流程）、口述答题录音回听
4. 每天挑一条串联线口述一遍（第 10 节），练到不看提示能讲完
5. 每周自测：随机抽 10 题限时口述，讲不清的标记重看；考前一晚过一遍第 14 节速查表
6. 先投小厂练手：面 2~3 家攒经验（感受节奏、暴露短板），再投目标公司
7. 考前 3 天：只过自我介绍、项目故事、速查表，不学新东西

总结

完整路线一句话：基础篇把语法、JS 基础和数组方法打牢 → 进阶篇啃下 3-5 年核心（响应式源码链路、diff 与编译优化、Vue3.5/3.6 新特性），并用串联线把考点织成网 → 高级篇备好定级弹药（性能优化闭环、微前端、系统设计）→ 冲刺篇用速查表快速过题、用面试技巧专项补表达。每个知识点都有通俗解析链接先让你开口、文档链接定框架、视频链接补理解——知道但说不出来时，先照解析链接复述一遍再录音回听；水平一般没关系，按阶段不跳级、每题开口练，6~8 周足够从”不敢面”到”能打”。

---

内容由 AI 生成，仅供参考。本文发布于 码上学习，转载请注明出处。