2023年整个前端面试市场有一个很有意思的现象Vue 3 已经不是要不要学的问题而是问得多深的问题。我参加过几轮面试也帮团队面过候选人发现 Vite 构建、Composition API、响应式原理、Pinia 状态管理这些几乎成了标配必问项。比起 Vue 2 时代说说生命周期、讲讲 v-if 和 v-show 区别这种基础题现在的八股明显更底层、更细节甚至不少面试官会直接要求手写一个简单的 reactive。这份八股集合是我在 2023 年求职和复盘过程中整理出来的覆盖了 Vue 3 底层原理、Composition API、组件通信、性能优化、工程化选型、手写题这几个最重要的维度。它适合三类人看准备跳槽的前端开发、从 Vue 2 转 Vue 3 的工程师、以及想系统梳理 Vue 3 知识体系的同学。下面我按面试场景拆开讲内容会偏面试向但每个知识点我都会把原理和踩坑一起说清楚。1. 面试官最爱问的底层差异Vue 2 和 Vue 3 到底改了什么1.1 响应式原理从 Object.defineProperty 到 Proxy 的完整逻辑这一题基本是面试必问而且追问频率极高。背答案很容易但如果你想在追问中稳住阵脚就必须真正理解两者在机制上的差异。Vue 2 的响应式核心是 Object.defineProperty。初始化 data 时Vue 会递归遍历每个对象的每一个属性通过 Object.defineProperty 把属性转换成 getter 和 setter。每个对象内部维护一个 Dep 依赖收集器组件渲染时创建 Watcher 并触发 getter把 Watcher 收集到这个属性的依赖列表中当属性被修改时触发 setter通知 Dep 里的 Watcher 去更新视图。这个过程有几个先天缺陷第一新增属性和删除属性无法被侦测。因为 Vue 2 在初始化时就已经劫持了已有属性之后新加的属性没有经过 defineProperty 处理自然也就没有 getter 和 setter。所以 Vue 2 才提供 Vue.set 和 Vue.delete 这两个补丁方案。第二数组变化无法被完整侦测。Object.defineProperty 不能拦截 length 变化也不能拦截索引赋值arr[0] 1 这种操作其实是能拦截的但 Vue 2 考虑到性能代价和复杂度没有做所以 Vue 2 只能重写数组的 7 个变更方法push、pop、shift、unshift、splice、sort、reverse来实现数组的响应式。第三初始化时递归整个 data 的开销很大。对象嵌套越深递归遍历的成本越高。就算某些深层对象在页面中根本不使用Vue 2 也会提前对其做响应式转换这是一种提前透支的性能损耗。Vue 3 用 Proxy 替代了 Object.defineProperty这是底层设计上的根本变化。Proxy 不是针对某个属性做劫持而是直接代理整个对象。通过 get、set、deleteProperty 这些 handler 来拦截所有操作。这意味着第一新增属性和删除属性天然能被侦测到。你在 reactive 对象上动态加一个属性页面会正常响应不需要再调用任何额外的 API。第二数组的变化天然能被侦测到。Proxy 能拦截索引赋值、length 修改以及数组方法调用所以不需要再重写数组方法。第三代理是懒执行的。Vue 3 的响应式处理是惰性的——只有当你通过 getter 访问到一个属性时才会对这个属性对应的值递归做响应式处理。注意其实 Vue 3 在创建代理时并不会立刻递归而是在触发 get 的时候发现目标值是对象才继续给这个对象创建 Proxy。这种设计让初始化成本大幅下降尤其对深层嵌套的大对象来说优化效果非常明显。不过 Proxy 也不是没有代价。最大的代价是兼容性Vue 3 直接放弃了 IE11 的支持因为 Proxy 的 polyfill 无法完全模拟原生语义。另外就是在运行期懒代理会把一部分本该在初始化时完成的递归工作搬到首次访问时去做但总体上是划算的。面试官还经常追问一个问题为什么 Vue 3 的 reactive 在多次调用同一个对象时返回的是同一个代理这是因为 Vue 3 内部维护了一个 WeakMap 来缓存原始对象到代理对象的映射避免同一个对象被多次代理导致引用不一致和性能浪费。这个细节在阅读源码时能看到面试时能答出来会是个加分项。1.2 模板编译与 diff 优化静态标记和 Block TreeVue 2 和 Vue 3 在虚拟 DOM 和 diff 算法层面的差异也是一道高频题。面试官最常见的问法是Vue 3 的 diff 优化体现在哪里Vue 2 在进行 diff 时是拿新旧虚拟 DOM 做全量对比。虽然也有双端对比算法来优化列表操作但整体上每个节点都要参与比较对于没有任何动态绑定的静态节点来说这种比较是白白浪费的。Vue 3 的优化思路是在编译阶段就把模板中的动态节点和静态节点区分开。具体来说Vue 3 的编译器会给动态绑定的节点打上 PatchFlags 标记比如一个节点只有文本是动态的{{ msg }}会标记为 TEXT如果一个节点有动态的 props会标记为 PROPS同时还记录下是哪个 props 是动态的。有了这些标记之后diff 时就不需要逐层递归比较整棵虚拟 DOM 树只需要比对被标记的动态部分。这就是 Vue 3 diff 性能远高于 Vue 2 的核心原因之一。另一个概念是 Block Tree。Vue 3 会把模板编译成一个 Block 节点通常是根节点Block 内部收集了所有动态子节点。当数据变化时直接从根 Block 节点出发对比它收集到的动态节点列表跳过大量静态内容。这种做法让 Vue 3 的更新粒度变成了动态内容驱动而不是整棵树重新 diff。1.3 Vue 2 和 Vue 3 的 API 设计差异如果说底层机制是原理题那 API 设计差异就是概念题。面试常考的差异点包括Vue 2 使用 Options APIdata、methods、computed、watch 分散在不同选项里Vue 3 在保留 Options API 的同时新增了 Composition APIsetup 函数后续还演进出 script setup 语法糖。Vue 2 的 data 必须是一个函数组件化之后避免数据共享Vue 3 中依然要求 data 是函数但 Composition API 下更推荐使用 ref 和 reactive。Vue 2 的 v-model 是 value input 事件的语法糖Vue 3 中 v-model 改成了 modelValue update:modelValue 事件并且支持在同一个组件上绑定多个 v-model。这个变化其实挺容易踩坑的。Vue 2 中全局 API 和内部组件都是静态挂载的Vue 3 把这些全部拆分成了具名导出模块比如 createApp、reactive、ref 等等。这为 Tree-Shaking 提供了基础也让打包体积更小。这里我有一个实际体会面试时不要只背差异列表最好能结合一个实际场景说明这个差异带来的影响。比如 v-model 的变化你可以说我在封装自定义弹窗组件时Vue 2 里我监听 input 事件更新 valueVue 3 里我监听 update:modelValue 事件更新 modelValue如果项目里出现双 v-model 绑定的需求Vue 3 的写法会更自然。这样面试官会觉得你是真的实践过而不是背稿子。2. Composition API 高频题setup、ref、reactive、computed 的细节与坑2.1 setup 函数到底干了什么setup 是 Composition API 的入口它在组件实例创建之前执行所以 this 访问不到组件实例。这个知识点基本每一个面试官都会问而且会顺带追问为什么 setup 中不能用 this从源码角度看setup 是在 beforeCreate 钩子之前调用的此时的组件实例还没完全初始化比如 data、methods、computed 都还没有绑定到 this 上。如果在 setup 中访问 this实际上是拿不到这些数据的。所以 Vue 3 的官方文档也明确说了setup 中不可以使用 this。需要补充的两个细节第一个是 setup 的执行时机。它在每次组件实例创建时只执行一次不是在每次渲染时都执行。这和 render 函数不同。第二个是 setup 返回值的两种方式。如果返回一个对象对象的属性会被合并到渲染上下文中在模板里可以直接访问如果返回一个函数该函数会作为组件的 render 函数。这个知道就好因为现在基本都用 script setup 语法糖了很少手动写 setup 返回对象。script setup 是 3.2 版本之后引入的语法糖它让 Composition API 的使用变得更简洁。顶层声明import、ref、reactive、函数等都不需要手动 return模板自动可用。同时它还支持通过 defineProps、defineEmits 来声明 props 和 emits。这个在面试时可以主动提到表明你用了最新实践。2.2 ref 和 reactive怎么选、有哪些注意点我经常在面试中问候选人你平时用 ref 多一点还是 reactive 多一点原因是什么 这个问题没有标准答案但可以看出候选人是否真正理解两者差异。核心区别是ref 可以处理基本类型和对象类型reactive 只能处理对象类型。ref 在处理对象类型时底层其实也是调用 reactive 来包装。ref 在处理基本类型时会创建一个 RefImpl 实例通过 getter/setter 拦截 .value 的读取和赋值操作。这里有几个高频考点第一个ref 为什么需要 .value因为 JS 的基本类型是值传递无法通过引用去拦截修改。如果想要让一个基本类型具备响应式能力就必须把它包装成一个对象。Vue 3 中这个包装对象就是 { value: ... }。所以你在 setup 里访问 ref 变量时要用 .value模板中不用是因为 Vue 在模板编译时会自动解包。第二个reactive 在处理嵌套对象时是自动深层的。而 ref 处理的对象实际上也是深层响应式的。这个深层行为在面试时常被问到比如reactive 的深层响应式实现机制是什么答案是在 getter 中判断目标值是不是对象是的话继续用 reactive 包裹从而实现懒递归代理。第三个解构陷阱。reactive 对象被解构之后属性会丢失响应式。因为解构出来的只是一个普通值它和原对象的 getter/setter 已经没有关系了。解决办法是使用 toRefs 或者 toRef。toRefs 可以把 reactive 对象的每个属性都转成 ref这样解构出来仍然保持响应式。第四个也是我实际踩过的一个坑ref 对象作为另一个对象的属性时会被自动解包。举例来说const count ref(0)然后 const obj reactive({ count })。此时 obj.count 不需要 .value它直接就是 0 的响应式引用修改 obj.count 和 count.value 是等价的。2.3 computed 和 watch使用细节与原理computed 在面试中的出镜率非常高问法通常有两类一是用法二是原理。用法层面的考点computed 有两种写法一个是传入 getter 函数一个是传入包含 get 和 set 的对象。区别在于纯 getter 的 computed 是只读的不能给它赋值带 set 的 computed 可以进行写操作这在 v-model 绑定到 computed 的情况时非常有用。原理层面的考点computed 为什么有缓存Vue 3 中 computed 是基于 effect 实现的。它会创建一个 effect 实例并设置 lazy 选项也就是说计算函数不会立刻执行而是在第一次访问返回值时才执行。执行过程中会建立依赖关系收集到内部依赖的响应式数据上依赖变化时不会立刻重新计算只是把 dirty 标记设为 true下次访问时才重新执行计算函数并更新缓存值。这个设计减少了无谓的计算尤其对开销较大的计算逻辑很有价值。watch 在面试中考得比较多的是 deep、immediate、flush 这几个选项deep是否深度监听对象内部变化。默认情况下watch 监听一个 reactive 对象时是隐式深层的监听 ref 对象时默认不是深层的需要显式设置 deep: true。immediate是否在初始化时立刻执行一次回调。这个选项常用于进入页面需要立刻获取数据的场景。flush控制回调的触发时机。默认是 pre在组件更新之前触发post 表示在组件更新之后触发sync 表示同步触发。和 nextTick 配合使用时post 往往能拿到更新后的 DOM。关于 watch 和 watchEffect 的区别这也是一个能区分面试者水平的问题。watchEffect 是自动追踪依赖的函数它会立即执行一次每次执行时访问到的响应式数据都会被收集为依赖当依赖变化时自动重新执行。而 watch 需要显式指定要监听的源并且把变更前值和变更后值传给回调。简单说watchEffect 更偏向副作用自动追踪逻辑watch 更偏向监听变化后处理逻辑。另外还有一个小细节watch 的回调是在 DOM 更新之前还是之后执行的默认情况下 watch 的回调是在组件更新之前执行的flush: pre。如果你需要访问更新之后的 DOM可以在回调里使用 await nextTick()或者直接把 flush 设为 post。这一点在面试中答出来比死记选项的效果好很多。3. 组件通信、生命周期与新特性面试题里的送分题也不能丢分3.1 组件通信的完整方案清单组件通信几乎是面试必考而且考法通常是开放式的说一下组件通信的方式有哪些分别适用于什么场景。Vue 3 里完整的通信方案可以归纳成以下几类第一props 和 emit。这是最基础的通信方式。父组件通过 props 向子组件传递数据子组件通过 emit 向父组件发送事件。Vue 3 在 script setup 中通过 defineProps 和 defineEmits 来声明类型检查也更方便。使用 TypeScript 时可以直接写泛型比如 defineProps{ msg: string }()我强烈建议在 TS 项目中这么写。第二v-model 属于 props emit 的进化版。Vue 3 的 v-model 是 modelValue update:modelValue 的组合。它允许一个组件绑定多个 v-model比如 v-model:title 和 v-model:content。这在实际业务中很常见比如封装一个表单组件需要同时受控标题和内容两个字段。第三provide 和 inject。这个方案适合跨层级的依赖注入比如祖父组件和孙组件之间的通信。Vue 3 的 provide/inject 支持基于响应式数据所以在 provide 时传 ref 或 reactive 对象孙组件注入后就可以保持响应式。第四事件总线。Vue 3 中官方移除了 $on、$off 实例方法所以不能直接使用 Vue 2 风格的事件总线。如果你想用事件总线需要借助 mitt 这样的第三方库。但说实话业务中我更推荐用 Pinia 而不是事件总线因为事件总线在大型项目里很容易变成维护地狱。第五Pinia/Vuex 状态管理。跨页面、跨组件的全局状态用状态管理库是更合理的方案。面试时要把每种方式的适用场景说清楚。不过我要提醒一点不要一上来就说用 Pinia 吧什么都能解决。面试官更想听到的是你理解每种方案的边界能根据场景做选型。3.2 生命周期变化组合式 API 里的钩子名字都变了Vue 3 的生命周期是面试常问的基础题但也是很多人容易混淆的点。Vue 2 的生命周期是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。Vue 3 组合式 API 对应的钩子名字变成了onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。特别要注意的是beforeDestroy 和 destroyed 在 Vue 3 中改名为 onBeforeUnmount 和 onUnmounted语义更准确了。有没有 beforeCreate 和 created 的对应钩子其实没有直接用钩子名而是用setup 函数的执行时机来替代了。setup 的执行时机是在 beforeCreate 之前组件实例创建之前。如果你需要在创建阶段做初始化逻辑直接在 setup 里同步执行即可。另外两个生命周期相关的点也值得一提一个是错误捕获钩子。Vue 3 提供了 onErrorCaptured 来捕获子孙组件的错误这在封装错误边界组件时有用。另一个是 onActivated 和 onDeactivated这两个配合 keep-alive 使用。组件被 keep-alive 缓存后激活时触发 onActivated失活时触发 onDeactivated。这个知识点在面试题中经常被套在一个场景里问列表页滚动到某个位置切走再切回来想保持滚动位置应该怎么做 答案就是用 keep-alive 配合 onActivated 恢复。如果你在 Vue 3 里同时使用 Options API 和 Composition API生命周期钩子的执行顺序也是个考点。组件执行顺序是 setup 先执行然后才开始执行 Options API 中注册的生命周期钩子。这一点在面试时可以作为加分细节说出来。3.3 Teleport、Suspense、Fragment新特性不要只是听说过面试官如果深入问 Vue 3 新特性Teleport 和 Suspense 是绕不开的。Teleport 的作用是把一段子内容传送到指定的 DOM 节点下。最常见的场景是全局提示弹窗。你写一个 Toast 组件如果不使用 Teleport弹窗的位置会受到父组件 overflow、z-index、transform 等 CSS 属性的影响很容易出现层级被裁切的情况。用 Teleport 把弹窗内容传送到 body 下就能规避这些问题。面试题变化也很常见如果弹窗显示在父容器内被 overflow 裁剪了怎么办 这个问题的标准回答就是 Teleport。Suspense 用于处理异步依赖它的作用是提供一个 fallback 内容在异步组件加载完成之前显示。面试常见问法是如何使用异步组件 标准答案是 defineAsyncComponent Suspense。defineAsyncComponent 用于定义异步加载的组件可以传入一个返回 Promise 的工厂函数Suspense 则用于包裹异步组件提供骨架屏或加载状态。Fragment 是相对隐蔽的一个特性。Vue 3 支持组件模板有多个根节点Vue 2 只能有一个根节点。这个变化在面试中很常见Vue 3 中组件为什么可以多根节点 因为 Vue 3 内部会把 Fragment 当作一种特殊的 VNode动态跟踪多根节点的变化避免了一个无意义的包裹元素。4. 性能优化与工程化选型面试里的加分项4.1 运行时和编译时协同的性能优化Vue 3 的一大卖点就是性能提升。面试官经常会问你在项目中做了哪些 Vue 3 性能优化 这个问题主要考察两个方面运行时优化和编译时优化。运行时优化主要有使用 shallowRef 和 shallowReactive 处理大数据结构中不需要深层响应式的场景。它们只对顶层做响应式处理internal 的嵌套对象不会被代理。这在渲染长列表、存储大对象时能明显减少代理开销。使用 markRaw 标记不需要转为响应式的对象。比如非响应式的第三方库实例、静态配置对象等。合理使用 computed 缓存计算结果避免模板中执行重复的方法。利用 v-memo 指令缓存节点。v-memo 是 Vue 3.2 之后的指令可以接受一个数组只有当数组中的值变化时才会重新渲染该节点及其子树。在大型列表或者条件渲染中非常有用是 Vue 3 性能优化的一把利器。使用动态组件配合 keep-alive 减少组件销毁重建的开销。编译时优化已经在前面说过了静态标记、Block Tree、静态提升把不参与更新的静态节点提升到渲染函数外部避免每次渲染都重新创建。这些是 Vue 3 编译器自动完成的不需要开发者干预但面试时说出来能体现你对 Vue 3 的底层理解。4.2 v-for 和 v-if 的优先级变化一个容易踩的坑Vue 2 中v-for 的优先级高于 v-if。这意味着 v-for 会先遍历列表再在每次遍历中判断 v-if 的条件。如果你写了 v-for 和 v-if 同时存在于同一个元素上Vue 2 会先把列表里的每一项循环出来再逐个判断条件这个行为的性能代价非常大。而且如果 v-if 的条件用到了循环变量写起来也没问题但如果 v-if 的判断条件依赖于外部状态而和循环项无关那就白遍历了一整圈。Vue 3 中v-if 的优先级高于 v-for。也就是说v-if 会先执行判断如果为 false整个元素都不会渲染v-for 也不会执行。这个改变在文档里有明确说明面试如果问起来要能答出Vue 3 中 v-if 优先级高于 v-for同时说明背后的性能逻辑。我实际开发中的建议是尽量避免在同一元素上同时使用 v-if 和 v-for。最佳实践是如果 v-if 和 v-for 是父子关系可以把 v-if 放到外层 template 上让 v-for 在内部列表上执行这样可以保证命中条件时才遍历。如果条件判断和循环项无关就把 v-if 提到更高层级。如果确实要根据列表项做条件判断可以考虑用 computed 先过滤后再遍历这样逻辑更清晰。这个点看似简单但实际项目中几乎天天会遇到面试官问出来不仅能考察你是否了解 Vue 3 的变更还能考察你有没有实际项目的判断力。4.3 状态管理和路由选型Pinia 还是 Vuex到 2023 年Pinia 已经成为 Vue 3 官方推荐的状态管理库。面试中如果问Pinia 和 Vuex 有什么区别回答可以从这几个维度展开语法和使用方式。Vuex 有 state、mutations、actions、getters 四个核心概念同步修改 state 必须通过 mutations异步操作在 actions 中发起。Pinia 则去掉了 mutations 这层概念直接修改 state 即可actions 也成为完全普通的函数state 的修改更自然。对 TypeScript 的支持。Pinia 对 TS 的类型推断更友好state、getters、actions 都有天然的类型推导不需要额外写复杂的模块类型。Vuex 在模块化后写 TS 类型会比较繁琐。代码拆分和 tree-shaking。Pinia 的 store 是独立结构可以使用 composition 的方式来定义一个 storeimport 哪个 store 就只会把哪个 store 打包进产物没有使用的 Vuex 模块会被保留在打包产物中影响体积。模块和嵌套。Vuex 的 modules 有嵌套结构Pinia 没有嵌套模块的概念每个 store 是独立的。当然面试官可能还会问什么时候用 Pinia什么时候用 Vuex 我的看法是Vue 3 新项目基本无脑选 Pinia除非团队有强烈的历史依赖或者已经有成熟的 Vuex 类型封装。Vuex 4 虽然也支持 Vue 3但无论从开发体验还是类型支持上Pinia 都已经全面领先。路由方面Vue Router 4 有以下几个面试高频点createWebHistory 和 createWebHashHistory 的区别。前者基于 History API路径干净但是需要服务端配合做 history fallback后者基于 hash 路由不需要服务端配置但 URL 会带 #。动态路由。addRoute 可以在运行时注册路由这在权限控制场景中常用于动态添加用户有权限访问的页面路由。需要注意的是 addRoute 之后需要调用 router.replace 来刷新当前路由否则可能无法正常渲染新路由。路由守卫。Vue Router 4 的路由守卫和 Vue Router 3 基本一致全局守卫 beforeEach、beforeResolve、afterEach路由独享守卫 beforeEnter组件内守卫 onBeforeRouteUpdate、onBeforeRouteLeave、onBeforeRouteEnter。5. 手写题与避坑经验面试中最考验真实水平的部分5.1 高频手写题手写 reactive、ref、computed 的核心逻辑面试官让手写代码通常不是为了考你完整的源码实现而是想看你的核心逻辑思路。所以手写题不需要和 Vue 源码完全一致但核心机制必须表达清楚。手写一个简化版 reactive核心是利用 Proxy 做依赖收集和触发。大致逻辑如下let activeEffect null function effect(fn) { activeEffect fn fn() activeEffect null } const targetMap new WeakMap() function track(target, key) { if (!activeEffect) return let depsMap targetMap.get(target) if (!depsMap) { depsMap new Map() targetMap.set(target, depsMap) } let dep depsMap.get(key) if (!dep) { dep new Set() depsMap.set(key, dep) } dep.add(activeEffect) } function trigger(target, key) { const depsMap targetMap.get(target) if (!depsMap) return const dep depsMap.get(key) if (dep) { dep.forEach(effect effect()) } } function reactive(target) { const proxy new Proxy(target, { get(target, key, receiver) { track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { const oldValue target[key] const result Reflect.set(target, key, value, receiver) if (oldValue ! value) { trigger(target, key) } return result } }) return proxy }这段代码的核心思想是get 时做依赖收集set 时触发更新。主动在 Proxy 的 get 和 set 中实现 track 和 trigger 的逻辑就是 Vue 3 响应式系统的骨架。面试时能写到这里并且能解释清楚targetMap为何用 WeakMap避免原始对象被代理对象持有引用导致无法被回收、Reflect.get/set的作用确保 this 指向正确基本就能过关。手写一个简化版 ref核心是给基本类型包一层对象function ref(value) { const refImpl { get value() { track(refImpl, value) return value }, set value(newValue) { if (newValue ! value) { value newValue trigger(refImpl, value) } } } return refImpl }这里的 track 和 trigger 可以复用上面的依赖收集系统。注意 ref 在处理对象类型时需要调用 reactive 包装所以实际 Vue 源码中ref 内部有isObject判断如果是对象就转成 reactive。手写 computed 相对难一些但是核心逻辑并不复杂。关键就是懒计算和缓存。用一个 dirty 标记判断是否需要重新计算function computed(getter) { let value let dirty true const effectFn () { dirty true trigger(computedRef, value) } const computedRef { get value() { if (dirty) { value getter() dirty false } track(computedRef, value) return value } } // 这里需要把 effectFn 注册到 getter 中使用到的响应式数据上 return computedRef }实际上完整的 computed 实现要配合 effect 机制来注册依赖但面试时能写出这个懒计算 缓存 脏检查的核心骨架就已经展示了你对 computed 原理的理解。5.2 实际项目中常踩的 Vue 3 坑和排查思路这部分是我最想分享的。我在从 Vue 2 迁移到 Vue 3 的初期真的踩了不少坑有些问题排查了很久才找到原因。第一个坑v-model 在自定义组件上的行为变化。一个弹窗组件之前 Vue 2 里的用法是:visible.sync实现一个自定义的 visible prop 双向绑定。升级到 Vue 3 之后.sync 修饰符被移除了需要改写成 v-model:visible。当时组里的老同事没有注意这个变化测试时发现点击打开弹窗没反应排查了半天才发现是 v-model 语法没适配。这个坑在迁移项目里非常常见。第二个坑ref 在模板中自动解包导致的意外行为。模板中 ref 是自动解包的比如const message ref(hello)模板里写{{ message }}能正常渲染。但是如果把 ref 存到一个数组里比如list.push(ref(text))在模板中访问list[0]时却不会自动解包需要写list[0].value。这一点很容易被忽略尤其当数据结构复杂时排查起来会绕圈子。第三个坑reactive 解构丢响应式。我在一个列表组件里用const { list, total } toRefs(reactive({ list: [], total: 0 }))做了解构。如果直接const { list, total } reactive(...)解构出来list 和 total 就完全不是响应式了。其实这个我在前面 2.2 里已经提过但我要再强调一遍在实际项目中这种 bug 很容易出现因为它不像别的错误会直接报错而是静默地导致页面不更新。第四个坑watch 监听 ref 对象的深层属性。watch(refObj, callback)默认不会监听嵌套对象内部的变化除非你传了deep: true。我在一个表单场景里watch 一个userInfo对象希望用户修改 userInfo.name 时触发回调结果页面没有反应。后来加了deep: true才生效。所以在项目里对象类的 watch 一定要根据需求显式判断是否加 deep。第五个坑异步组件加载失败后的错误处理。在 Vue 3 中使用defineAsyncComponent加载异步组件时如果组件文件加载失败比如网络波动控制台只会报一个警告。如果你想捕获错误并做用户友好的提示需要用到异步组件的onError回调选项。这个细节官方文档提得不多但生产环境很有用。我曾遇到过资源部署后路由动态引入的组件路径写错控制台看不到明显报错页面白屏排查了很久才定位到。5.3 面试答题策略和我的复盘思考最后分享一些我在面试过程中总结的答题经验这些经验不是技术本身但对通过面试很重要。第一回答原理题时要分是什么 - 为什么 - 解决了什么三个层次。比如面试官问Vue 3 为什么用 Proxy 替代 Object.defineProperty你说Proxy 可以拦截更多操作、支持数组和新增属性这是是什么层面接着你能说出 Object.defineProperty 需要递归、存在缺陷这是为什么层面最后你能补一句所以 Vue 3 的响应式实现更简洁、性能更好、对开发者更友好这就是解决了什么层面的总结。三个层次说完哪怕细节不完整面试官对你的印象也会很正面。第二不要只背结论要准备一个场景案例。面试官问 computed 和 watch 的区别你如果只说computed 有缓存watch 没有听起来很机械。不如加一个具体的场景在我的后台管理系统中搜索结果列表会根据关键字和筛选条件动态计算我用 computed 来做过滤当关键字变化时需要重置页码并重新请求接口这时候我用 watch 来监听关键字。 有语义、有实际场景说服力完全不一样。第三对不确定的点坦诚说这个细节我不太确定但我的理解是...。这比不懂装懂要好得多。面试官通常考察的是候选人的思考方式遇到不会的问题能给出一个有逻辑的推测路径也足以证明你的技术功底。比如有一次我被问到 Vue 3 的 tree-shaking 是怎么实现按需引入的我不太确定具体编译产物细节但我从 ES Module 的静态分析特性和 Vue 3 将 API 改为具名导出这两个方向做了分析面试官认可了我的思路。2023 年我最大的感受是前端面试越来越卷但卷的方向是深度而不是广度。Vue 3 的面试题从原理到源码、从工程化到性能优化都在考察你是否真正理解框架的底层逻辑。这份八股集合只是一个框架真正的功夫在框架之外的思考和实践里。
2023年整个前端面试市场有一个很有意思的现象Vue 3 已经不是要不要学的问题而是问得多深的问题。我参加过几轮面试也帮团队面过候选人发现 Vite 构建、Composition API、响应式原理、Pinia 状态管理这些几乎成了标配必问项。比起 Vue 2 时代说说生命周期、讲讲 v-if 和 v-show 区别这种基础题现在的八股明显更底层、更细节甚至不少面试官会直接要求手写一个简单的 reactive。这份八股集合是我在 2023 年求职和复盘过程中整理出来的覆盖了 Vue 3 底层原理、Composition API、组件通信、性能优化、工程化选型、手写题这几个最重要的维度。它适合三类人看准备跳槽的前端开发、从 Vue 2 转 Vue 3 的工程师、以及想系统梳理 Vue 3 知识体系的同学。下面我按面试场景拆开讲内容会偏面试向但每个知识点我都会把原理和踩坑一起说清楚。1. 面试官最爱问的底层差异Vue 2 和 Vue 3 到底改了什么1.1 响应式原理从 Object.defineProperty 到 Proxy 的完整逻辑这一题基本是面试必问而且追问频率极高。背答案很容易但如果你想在追问中稳住阵脚就必须真正理解两者在机制上的差异。Vue 2 的响应式核心是 Object.defineProperty。初始化 data 时Vue 会递归遍历每个对象的每一个属性通过 Object.defineProperty 把属性转换成 getter 和 setter。每个对象内部维护一个 Dep 依赖收集器组件渲染时创建 Watcher 并触发 getter把 Watcher 收集到这个属性的依赖列表中当属性被修改时触发 setter通知 Dep 里的 Watcher 去更新视图。这个过程有几个先天缺陷第一新增属性和删除属性无法被侦测。因为 Vue 2 在初始化时就已经劫持了已有属性之后新加的属性没有经过 defineProperty 处理自然也就没有 getter 和 setter。所以 Vue 2 才提供 Vue.set 和 Vue.delete 这两个补丁方案。第二数组变化无法被完整侦测。Object.defineProperty 不能拦截 length 变化也不能拦截索引赋值arr[0] 1 这种操作其实是能拦截的但 Vue 2 考虑到性能代价和复杂度没有做所以 Vue 2 只能重写数组的 7 个变更方法push、pop、shift、unshift、splice、sort、reverse来实现数组的响应式。第三初始化时递归整个 data 的开销很大。对象嵌套越深递归遍历的成本越高。就算某些深层对象在页面中根本不使用Vue 2 也会提前对其做响应式转换这是一种提前透支的性能损耗。Vue 3 用 Proxy 替代了 Object.defineProperty这是底层设计上的根本变化。Proxy 不是针对某个属性做劫持而是直接代理整个对象。通过 get、set、deleteProperty 这些 handler 来拦截所有操作。这意味着第一新增属性和删除属性天然能被侦测到。你在 reactive 对象上动态加一个属性页面会正常响应不需要再调用任何额外的 API。第二数组的变化天然能被侦测到。Proxy 能拦截索引赋值、length 修改以及数组方法调用所以不需要再重写数组方法。第三代理是懒执行的。Vue 3 的响应式处理是惰性的——只有当你通过 getter 访问到一个属性时才会对这个属性对应的值递归做响应式处理。注意其实 Vue 3 在创建代理时并不会立刻递归而是在触发 get 的时候发现目标值是对象才继续给这个对象创建 Proxy。这种设计让初始化成本大幅下降尤其对深层嵌套的大对象来说优化效果非常明显。不过 Proxy 也不是没有代价。最大的代价是兼容性Vue 3 直接放弃了 IE11 的支持因为 Proxy 的 polyfill 无法完全模拟原生语义。另外就是在运行期懒代理会把一部分本该在初始化时完成的递归工作搬到首次访问时去做但总体上是划算的。面试官还经常追问一个问题为什么 Vue 3 的 reactive 在多次调用同一个对象时返回的是同一个代理这是因为 Vue 3 内部维护了一个 WeakMap 来缓存原始对象到代理对象的映射避免同一个对象被多次代理导致引用不一致和性能浪费。这个细节在阅读源码时能看到面试时能答出来会是个加分项。1.2 模板编译与 diff 优化静态标记和 Block TreeVue 2 和 Vue 3 在虚拟 DOM 和 diff 算法层面的差异也是一道高频题。面试官最常见的问法是Vue 3 的 diff 优化体现在哪里Vue 2 在进行 diff 时是拿新旧虚拟 DOM 做全量对比。虽然也有双端对比算法来优化列表操作但整体上每个节点都要参与比较对于没有任何动态绑定的静态节点来说这种比较是白白浪费的。Vue 3 的优化思路是在编译阶段就把模板中的动态节点和静态节点区分开。具体来说Vue 3 的编译器会给动态绑定的节点打上 PatchFlags 标记比如一个节点只有文本是动态的{{ msg }}会标记为 TEXT如果一个节点有动态的 props会标记为 PROPS同时还记录下是哪个 props 是动态的。有了这些标记之后diff 时就不需要逐层递归比较整棵虚拟 DOM 树只需要比对被标记的动态部分。这就是 Vue 3 diff 性能远高于 Vue 2 的核心原因之一。另一个概念是 Block Tree。Vue 3 会把模板编译成一个 Block 节点通常是根节点Block 内部收集了所有动态子节点。当数据变化时直接从根 Block 节点出发对比它收集到的动态节点列表跳过大量静态内容。这种做法让 Vue 3 的更新粒度变成了动态内容驱动而不是整棵树重新 diff。1.3 Vue 2 和 Vue 3 的 API 设计差异如果说底层机制是原理题那 API 设计差异就是概念题。面试常考的差异点包括Vue 2 使用 Options APIdata、methods、computed、watch 分散在不同选项里Vue 3 在保留 Options API 的同时新增了 Composition APIsetup 函数后续还演进出 script setup 语法糖。Vue 2 的 data 必须是一个函数组件化之后避免数据共享Vue 3 中依然要求 data 是函数但 Composition API 下更推荐使用 ref 和 reactive。Vue 2 的 v-model 是 value input 事件的语法糖Vue 3 中 v-model 改成了 modelValue update:modelValue 事件并且支持在同一个组件上绑定多个 v-model。这个变化其实挺容易踩坑的。Vue 2 中全局 API 和内部组件都是静态挂载的Vue 3 把这些全部拆分成了具名导出模块比如 createApp、reactive、ref 等等。这为 Tree-Shaking 提供了基础也让打包体积更小。这里我有一个实际体会面试时不要只背差异列表最好能结合一个实际场景说明这个差异带来的影响。比如 v-model 的变化你可以说我在封装自定义弹窗组件时Vue 2 里我监听 input 事件更新 valueVue 3 里我监听 update:modelValue 事件更新 modelValue如果项目里出现双 v-model 绑定的需求Vue 3 的写法会更自然。这样面试官会觉得你是真的实践过而不是背稿子。2. Composition API 高频题setup、ref、reactive、computed 的细节与坑2.1 setup 函数到底干了什么setup 是 Composition API 的入口它在组件实例创建之前执行所以 this 访问不到组件实例。这个知识点基本每一个面试官都会问而且会顺带追问为什么 setup 中不能用 this从源码角度看setup 是在 beforeCreate 钩子之前调用的此时的组件实例还没完全初始化比如 data、methods、computed 都还没有绑定到 this 上。如果在 setup 中访问 this实际上是拿不到这些数据的。所以 Vue 3 的官方文档也明确说了setup 中不可以使用 this。需要补充的两个细节第一个是 setup 的执行时机。它在每次组件实例创建时只执行一次不是在每次渲染时都执行。这和 render 函数不同。第二个是 setup 返回值的两种方式。如果返回一个对象对象的属性会被合并到渲染上下文中在模板里可以直接访问如果返回一个函数该函数会作为组件的 render 函数。这个知道就好因为现在基本都用 script setup 语法糖了很少手动写 setup 返回对象。script setup 是 3.2 版本之后引入的语法糖它让 Composition API 的使用变得更简洁。顶层声明import、ref、reactive、函数等都不需要手动 return模板自动可用。同时它还支持通过 defineProps、defineEmits 来声明 props 和 emits。这个在面试时可以主动提到表明你用了最新实践。2.2 ref 和 reactive怎么选、有哪些注意点我经常在面试中问候选人你平时用 ref 多一点还是 reactive 多一点原因是什么 这个问题没有标准答案但可以看出候选人是否真正理解两者差异。核心区别是ref 可以处理基本类型和对象类型reactive 只能处理对象类型。ref 在处理对象类型时底层其实也是调用 reactive 来包装。ref 在处理基本类型时会创建一个 RefImpl 实例通过 getter/setter 拦截 .value 的读取和赋值操作。这里有几个高频考点第一个ref 为什么需要 .value因为 JS 的基本类型是值传递无法通过引用去拦截修改。如果想要让一个基本类型具备响应式能力就必须把它包装成一个对象。Vue 3 中这个包装对象就是 { value: ... }。所以你在 setup 里访问 ref 变量时要用 .value模板中不用是因为 Vue 在模板编译时会自动解包。第二个reactive 在处理嵌套对象时是自动深层的。而 ref 处理的对象实际上也是深层响应式的。这个深层行为在面试时常被问到比如reactive 的深层响应式实现机制是什么答案是在 getter 中判断目标值是不是对象是的话继续用 reactive 包裹从而实现懒递归代理。第三个解构陷阱。reactive 对象被解构之后属性会丢失响应式。因为解构出来的只是一个普通值它和原对象的 getter/setter 已经没有关系了。解决办法是使用 toRefs 或者 toRef。toRefs 可以把 reactive 对象的每个属性都转成 ref这样解构出来仍然保持响应式。第四个也是我实际踩过的一个坑ref 对象作为另一个对象的属性时会被自动解包。举例来说const count ref(0)然后 const obj reactive({ count })。此时 obj.count 不需要 .value它直接就是 0 的响应式引用修改 obj.count 和 count.value 是等价的。2.3 computed 和 watch使用细节与原理computed 在面试中的出镜率非常高问法通常有两类一是用法二是原理。用法层面的考点computed 有两种写法一个是传入 getter 函数一个是传入包含 get 和 set 的对象。区别在于纯 getter 的 computed 是只读的不能给它赋值带 set 的 computed 可以进行写操作这在 v-model 绑定到 computed 的情况时非常有用。原理层面的考点computed 为什么有缓存Vue 3 中 computed 是基于 effect 实现的。它会创建一个 effect 实例并设置 lazy 选项也就是说计算函数不会立刻执行而是在第一次访问返回值时才执行。执行过程中会建立依赖关系收集到内部依赖的响应式数据上依赖变化时不会立刻重新计算只是把 dirty 标记设为 true下次访问时才重新执行计算函数并更新缓存值。这个设计减少了无谓的计算尤其对开销较大的计算逻辑很有价值。watch 在面试中考得比较多的是 deep、immediate、flush 这几个选项deep是否深度监听对象内部变化。默认情况下watch 监听一个 reactive 对象时是隐式深层的监听 ref 对象时默认不是深层的需要显式设置 deep: true。immediate是否在初始化时立刻执行一次回调。这个选项常用于进入页面需要立刻获取数据的场景。flush控制回调的触发时机。默认是 pre在组件更新之前触发post 表示在组件更新之后触发sync 表示同步触发。和 nextTick 配合使用时post 往往能拿到更新后的 DOM。关于 watch 和 watchEffect 的区别这也是一个能区分面试者水平的问题。watchEffect 是自动追踪依赖的函数它会立即执行一次每次执行时访问到的响应式数据都会被收集为依赖当依赖变化时自动重新执行。而 watch 需要显式指定要监听的源并且把变更前值和变更后值传给回调。简单说watchEffect 更偏向副作用自动追踪逻辑watch 更偏向监听变化后处理逻辑。另外还有一个小细节watch 的回调是在 DOM 更新之前还是之后执行的默认情况下 watch 的回调是在组件更新之前执行的flush: pre。如果你需要访问更新之后的 DOM可以在回调里使用 await nextTick()或者直接把 flush 设为 post。这一点在面试中答出来比死记选项的效果好很多。3. 组件通信、生命周期与新特性面试题里的送分题也不能丢分3.1 组件通信的完整方案清单组件通信几乎是面试必考而且考法通常是开放式的说一下组件通信的方式有哪些分别适用于什么场景。Vue 3 里完整的通信方案可以归纳成以下几类第一props 和 emit。这是最基础的通信方式。父组件通过 props 向子组件传递数据子组件通过 emit 向父组件发送事件。Vue 3 在 script setup 中通过 defineProps 和 defineEmits 来声明类型检查也更方便。使用 TypeScript 时可以直接写泛型比如 defineProps{ msg: string }()我强烈建议在 TS 项目中这么写。第二v-model 属于 props emit 的进化版。Vue 3 的 v-model 是 modelValue update:modelValue 的组合。它允许一个组件绑定多个 v-model比如 v-model:title 和 v-model:content。这在实际业务中很常见比如封装一个表单组件需要同时受控标题和内容两个字段。第三provide 和 inject。这个方案适合跨层级的依赖注入比如祖父组件和孙组件之间的通信。Vue 3 的 provide/inject 支持基于响应式数据所以在 provide 时传 ref 或 reactive 对象孙组件注入后就可以保持响应式。第四事件总线。Vue 3 中官方移除了 $on、$off 实例方法所以不能直接使用 Vue 2 风格的事件总线。如果你想用事件总线需要借助 mitt 这样的第三方库。但说实话业务中我更推荐用 Pinia 而不是事件总线因为事件总线在大型项目里很容易变成维护地狱。第五Pinia/Vuex 状态管理。跨页面、跨组件的全局状态用状态管理库是更合理的方案。面试时要把每种方式的适用场景说清楚。不过我要提醒一点不要一上来就说用 Pinia 吧什么都能解决。面试官更想听到的是你理解每种方案的边界能根据场景做选型。3.2 生命周期变化组合式 API 里的钩子名字都变了Vue 3 的生命周期是面试常问的基础题但也是很多人容易混淆的点。Vue 2 的生命周期是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。Vue 3 组合式 API 对应的钩子名字变成了onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted。特别要注意的是beforeDestroy 和 destroyed 在 Vue 3 中改名为 onBeforeUnmount 和 onUnmounted语义更准确了。有没有 beforeCreate 和 created 的对应钩子其实没有直接用钩子名而是用setup 函数的执行时机来替代了。setup 的执行时机是在 beforeCreate 之前组件实例创建之前。如果你需要在创建阶段做初始化逻辑直接在 setup 里同步执行即可。另外两个生命周期相关的点也值得一提一个是错误捕获钩子。Vue 3 提供了 onErrorCaptured 来捕获子孙组件的错误这在封装错误边界组件时有用。另一个是 onActivated 和 onDeactivated这两个配合 keep-alive 使用。组件被 keep-alive 缓存后激活时触发 onActivated失活时触发 onDeactivated。这个知识点在面试题中经常被套在一个场景里问列表页滚动到某个位置切走再切回来想保持滚动位置应该怎么做 答案就是用 keep-alive 配合 onActivated 恢复。如果你在 Vue 3 里同时使用 Options API 和 Composition API生命周期钩子的执行顺序也是个考点。组件执行顺序是 setup 先执行然后才开始执行 Options API 中注册的生命周期钩子。这一点在面试时可以作为加分细节说出来。3.3 Teleport、Suspense、Fragment新特性不要只是听说过面试官如果深入问 Vue 3 新特性Teleport 和 Suspense 是绕不开的。Teleport 的作用是把一段子内容传送到指定的 DOM 节点下。最常见的场景是全局提示弹窗。你写一个 Toast 组件如果不使用 Teleport弹窗的位置会受到父组件 overflow、z-index、transform 等 CSS 属性的影响很容易出现层级被裁切的情况。用 Teleport 把弹窗内容传送到 body 下就能规避这些问题。面试题变化也很常见如果弹窗显示在父容器内被 overflow 裁剪了怎么办 这个问题的标准回答就是 Teleport。Suspense 用于处理异步依赖它的作用是提供一个 fallback 内容在异步组件加载完成之前显示。面试常见问法是如何使用异步组件 标准答案是 defineAsyncComponent Suspense。defineAsyncComponent 用于定义异步加载的组件可以传入一个返回 Promise 的工厂函数Suspense 则用于包裹异步组件提供骨架屏或加载状态。Fragment 是相对隐蔽的一个特性。Vue 3 支持组件模板有多个根节点Vue 2 只能有一个根节点。这个变化在面试中很常见Vue 3 中组件为什么可以多根节点 因为 Vue 3 内部会把 Fragment 当作一种特殊的 VNode动态跟踪多根节点的变化避免了一个无意义的包裹元素。4. 性能优化与工程化选型面试里的加分项4.1 运行时和编译时协同的性能优化Vue 3 的一大卖点就是性能提升。面试官经常会问你在项目中做了哪些 Vue 3 性能优化 这个问题主要考察两个方面运行时优化和编译时优化。运行时优化主要有使用 shallowRef 和 shallowReactive 处理大数据结构中不需要深层响应式的场景。它们只对顶层做响应式处理internal 的嵌套对象不会被代理。这在渲染长列表、存储大对象时能明显减少代理开销。使用 markRaw 标记不需要转为响应式的对象。比如非响应式的第三方库实例、静态配置对象等。合理使用 computed 缓存计算结果避免模板中执行重复的方法。利用 v-memo 指令缓存节点。v-memo 是 Vue 3.2 之后的指令可以接受一个数组只有当数组中的值变化时才会重新渲染该节点及其子树。在大型列表或者条件渲染中非常有用是 Vue 3 性能优化的一把利器。使用动态组件配合 keep-alive 减少组件销毁重建的开销。编译时优化已经在前面说过了静态标记、Block Tree、静态提升把不参与更新的静态节点提升到渲染函数外部避免每次渲染都重新创建。这些是 Vue 3 编译器自动完成的不需要开发者干预但面试时说出来能体现你对 Vue 3 的底层理解。4.2 v-for 和 v-if 的优先级变化一个容易踩的坑Vue 2 中v-for 的优先级高于 v-if。这意味着 v-for 会先遍历列表再在每次遍历中判断 v-if 的条件。如果你写了 v-for 和 v-if 同时存在于同一个元素上Vue 2 会先把列表里的每一项循环出来再逐个判断条件这个行为的性能代价非常大。而且如果 v-if 的条件用到了循环变量写起来也没问题但如果 v-if 的判断条件依赖于外部状态而和循环项无关那就白遍历了一整圈。Vue 3 中v-if 的优先级高于 v-for。也就是说v-if 会先执行判断如果为 false整个元素都不会渲染v-for 也不会执行。这个改变在文档里有明确说明面试如果问起来要能答出Vue 3 中 v-if 优先级高于 v-for同时说明背后的性能逻辑。我实际开发中的建议是尽量避免在同一元素上同时使用 v-if 和 v-for。最佳实践是如果 v-if 和 v-for 是父子关系可以把 v-if 放到外层 template 上让 v-for 在内部列表上执行这样可以保证命中条件时才遍历。如果条件判断和循环项无关就把 v-if 提到更高层级。如果确实要根据列表项做条件判断可以考虑用 computed 先过滤后再遍历这样逻辑更清晰。这个点看似简单但实际项目中几乎天天会遇到面试官问出来不仅能考察你是否了解 Vue 3 的变更还能考察你有没有实际项目的判断力。4.3 状态管理和路由选型Pinia 还是 Vuex到 2023 年Pinia 已经成为 Vue 3 官方推荐的状态管理库。面试中如果问Pinia 和 Vuex 有什么区别回答可以从这几个维度展开语法和使用方式。Vuex 有 state、mutations、actions、getters 四个核心概念同步修改 state 必须通过 mutations异步操作在 actions 中发起。Pinia 则去掉了 mutations 这层概念直接修改 state 即可actions 也成为完全普通的函数state 的修改更自然。对 TypeScript 的支持。Pinia 对 TS 的类型推断更友好state、getters、actions 都有天然的类型推导不需要额外写复杂的模块类型。Vuex 在模块化后写 TS 类型会比较繁琐。代码拆分和 tree-shaking。Pinia 的 store 是独立结构可以使用 composition 的方式来定义一个 storeimport 哪个 store 就只会把哪个 store 打包进产物没有使用的 Vuex 模块会被保留在打包产物中影响体积。模块和嵌套。Vuex 的 modules 有嵌套结构Pinia 没有嵌套模块的概念每个 store 是独立的。当然面试官可能还会问什么时候用 Pinia什么时候用 Vuex 我的看法是Vue 3 新项目基本无脑选 Pinia除非团队有强烈的历史依赖或者已经有成熟的 Vuex 类型封装。Vuex 4 虽然也支持 Vue 3但无论从开发体验还是类型支持上Pinia 都已经全面领先。路由方面Vue Router 4 有以下几个面试高频点createWebHistory 和 createWebHashHistory 的区别。前者基于 History API路径干净但是需要服务端配合做 history fallback后者基于 hash 路由不需要服务端配置但 URL 会带 #。动态路由。addRoute 可以在运行时注册路由这在权限控制场景中常用于动态添加用户有权限访问的页面路由。需要注意的是 addRoute 之后需要调用 router.replace 来刷新当前路由否则可能无法正常渲染新路由。路由守卫。Vue Router 4 的路由守卫和 Vue Router 3 基本一致全局守卫 beforeEach、beforeResolve、afterEach路由独享守卫 beforeEnter组件内守卫 onBeforeRouteUpdate、onBeforeRouteLeave、onBeforeRouteEnter。5. 手写题与避坑经验面试中最考验真实水平的部分5.1 高频手写题手写 reactive、ref、computed 的核心逻辑面试官让手写代码通常不是为了考你完整的源码实现而是想看你的核心逻辑思路。所以手写题不需要和 Vue 源码完全一致但核心机制必须表达清楚。手写一个简化版 reactive核心是利用 Proxy 做依赖收集和触发。大致逻辑如下let activeEffect null function effect(fn) { activeEffect fn fn() activeEffect null } const targetMap new WeakMap() function track(target, key) { if (!activeEffect) return let depsMap targetMap.get(target) if (!depsMap) { depsMap new Map() targetMap.set(target, depsMap) } let dep depsMap.get(key) if (!dep) { dep new Set() depsMap.set(key, dep) } dep.add(activeEffect) } function trigger(target, key) { const depsMap targetMap.get(target) if (!depsMap) return const dep depsMap.get(key) if (dep) { dep.forEach(effect effect()) } } function reactive(target) { const proxy new Proxy(target, { get(target, key, receiver) { track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { const oldValue target[key] const result Reflect.set(target, key, value, receiver) if (oldValue ! value) { trigger(target, key) } return result } }) return proxy }这段代码的核心思想是get 时做依赖收集set 时触发更新。主动在 Proxy 的 get 和 set 中实现 track 和 trigger 的逻辑就是 Vue 3 响应式系统的骨架。面试时能写到这里并且能解释清楚targetMap为何用 WeakMap避免原始对象被代理对象持有引用导致无法被回收、Reflect.get/set的作用确保 this 指向正确基本就能过关。手写一个简化版 ref核心是给基本类型包一层对象function ref(value) { const refImpl { get value() { track(refImpl, value) return value }, set value(newValue) { if (newValue ! value) { value newValue trigger(refImpl, value) } } } return refImpl }这里的 track 和 trigger 可以复用上面的依赖收集系统。注意 ref 在处理对象类型时需要调用 reactive 包装所以实际 Vue 源码中ref 内部有isObject判断如果是对象就转成 reactive。手写 computed 相对难一些但是核心逻辑并不复杂。关键就是懒计算和缓存。用一个 dirty 标记判断是否需要重新计算function computed(getter) { let value let dirty true const effectFn () { dirty true trigger(computedRef, value) } const computedRef { get value() { if (dirty) { value getter() dirty false } track(computedRef, value) return value } } // 这里需要把 effectFn 注册到 getter 中使用到的响应式数据上 return computedRef }实际上完整的 computed 实现要配合 effect 机制来注册依赖但面试时能写出这个懒计算 缓存 脏检查的核心骨架就已经展示了你对 computed 原理的理解。5.2 实际项目中常踩的 Vue 3 坑和排查思路这部分是我最想分享的。我在从 Vue 2 迁移到 Vue 3 的初期真的踩了不少坑有些问题排查了很久才找到原因。第一个坑v-model 在自定义组件上的行为变化。一个弹窗组件之前 Vue 2 里的用法是:visible.sync实现一个自定义的 visible prop 双向绑定。升级到 Vue 3 之后.sync 修饰符被移除了需要改写成 v-model:visible。当时组里的老同事没有注意这个变化测试时发现点击打开弹窗没反应排查了半天才发现是 v-model 语法没适配。这个坑在迁移项目里非常常见。第二个坑ref 在模板中自动解包导致的意外行为。模板中 ref 是自动解包的比如const message ref(hello)模板里写{{ message }}能正常渲染。但是如果把 ref 存到一个数组里比如list.push(ref(text))在模板中访问list[0]时却不会自动解包需要写list[0].value。这一点很容易被忽略尤其当数据结构复杂时排查起来会绕圈子。第三个坑reactive 解构丢响应式。我在一个列表组件里用const { list, total } toRefs(reactive({ list: [], total: 0 }))做了解构。如果直接const { list, total } reactive(...)解构出来list 和 total 就完全不是响应式了。其实这个我在前面 2.2 里已经提过但我要再强调一遍在实际项目中这种 bug 很容易出现因为它不像别的错误会直接报错而是静默地导致页面不更新。第四个坑watch 监听 ref 对象的深层属性。watch(refObj, callback)默认不会监听嵌套对象内部的变化除非你传了deep: true。我在一个表单场景里watch 一个userInfo对象希望用户修改 userInfo.name 时触发回调结果页面没有反应。后来加了deep: true才生效。所以在项目里对象类的 watch 一定要根据需求显式判断是否加 deep。第五个坑异步组件加载失败后的错误处理。在 Vue 3 中使用defineAsyncComponent加载异步组件时如果组件文件加载失败比如网络波动控制台只会报一个警告。如果你想捕获错误并做用户友好的提示需要用到异步组件的onError回调选项。这个细节官方文档提得不多但生产环境很有用。我曾遇到过资源部署后路由动态引入的组件路径写错控制台看不到明显报错页面白屏排查了很久才定位到。5.3 面试答题策略和我的复盘思考最后分享一些我在面试过程中总结的答题经验这些经验不是技术本身但对通过面试很重要。第一回答原理题时要分是什么 - 为什么 - 解决了什么三个层次。比如面试官问Vue 3 为什么用 Proxy 替代 Object.defineProperty你说Proxy 可以拦截更多操作、支持数组和新增属性这是是什么层面接着你能说出 Object.defineProperty 需要递归、存在缺陷这是为什么层面最后你能补一句所以 Vue 3 的响应式实现更简洁、性能更好、对开发者更友好这就是解决了什么层面的总结。三个层次说完哪怕细节不完整面试官对你的印象也会很正面。第二不要只背结论要准备一个场景案例。面试官问 computed 和 watch 的区别你如果只说computed 有缓存watch 没有听起来很机械。不如加一个具体的场景在我的后台管理系统中搜索结果列表会根据关键字和筛选条件动态计算我用 computed 来做过滤当关键字变化时需要重置页码并重新请求接口这时候我用 watch 来监听关键字。 有语义、有实际场景说服力完全不一样。第三对不确定的点坦诚说这个细节我不太确定但我的理解是...。这比不懂装懂要好得多。面试官通常考察的是候选人的思考方式遇到不会的问题能给出一个有逻辑的推测路径也足以证明你的技术功底。比如有一次我被问到 Vue 3 的 tree-shaking 是怎么实现按需引入的我不太确定具体编译产物细节但我从 ES Module 的静态分析特性和 Vue 3 将 API 改为具名导出这两个方向做了分析面试官认可了我的思路。2023 年我最大的感受是前端面试越来越卷但卷的方向是深度而不是广度。Vue 3 的面试题从原理到源码、从工程化到性能优化都在考察你是否真正理解框架的底层逻辑。这份八股集合只是一个框架真正的功夫在框架之外的思考和实践里。
