老实说现在前端面试里纯背 API 已经不太管用了。你背得出v-if和v-show的区别、背得出computed和watch的差异这只是入场券。面试官真正想看的是你遇到一个具体问题时的分析路径和工程判断。上一篇我聊了 Vue 基础、模板语法和组件通信这篇“vue 面试题(二)”我打算换个讲法不再按知识点罗列而是把面试里几乎绕不开的几个硬骨头拆开揉碎——手写响应式系统、自定义v-model的原理、动态路由与权限控制、Vue 和 React 的架构差异、生命周期和自定义指令以及一些“看起来很偏但实际很常用”的工程化场景比如 m3u8 视频流播放、DevTools 调试、样式穿透、WebRTC 集成这些。每一块我都尽量给出可以落地验证的代码和你直接能抄的结论。这篇同样适合两类人准备跳槽面试的 Vue 开发者以及用过 Vue 但总觉得哪里没吃透、想借“面试题”这个由头把知识体系重新梳一遍的人。看完你可以不背题但遇到同类问题应该能讲出自己的理解。1. 响应式系统从 Proxy 到手写 reactive、ref、effect、computed1.1 为什么面试官总爱问“手写响应式”说句实在话reactive、ref、effect、computed这几个 API 用起来很简单难的是回答“它到底怎么工作的”。面试官让你脱离 Vue 源码、用原生 Proxy 手写一个 mini 响应式系统不是在为难你而是在验证两件事第一你是不是只停留在 API 搬运工层面第二你遇到“数据变了视图不更新”这类问题时能不能快速定位到响应式链路哪里断了。这道题我见过很多版本最典型的考察路径是Proy 能监听什么 → 依赖如何收集 → 更新如何触发 →ref和computed在底层如何复用这套机制。我们顺着这条线走一遍。1.2 依赖收集与触发更新的骨架先不要想 Vue 的复杂实现响应式的本质就两件事读取时收集依赖写入时触发依赖。谁在读取渲染函数、computed、watch这些都会读。谁在写入通常是我们改数据的地方。所以最核心的是一个“依赖管理器”。Vue 3 里用的是targetMap→depsMap→dep的三层结构翻译成人话就是每个响应式对象对应一张属性映射表每个属性对应一组副作用函数集合。我用WeakMapMapSet先搭个骨架let 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()) } }为什么targetMap用WeakMap而不是Map因为普通Map会强引用 key即使响应式对象本身已经不再使用它也赖在内存里不走。WeakMap是弱引用key 被垃圾回收后整条依赖链也能跟着释放。这个点面试官十有八九会追问答上来了就是加分项。有了依赖管理器effect就很简单把传入的函数设为activeEffect然后立即执行一次执行过程中读取响应式属性就会触发track把当前函数收集进依赖集合执行完再把activeEffect置空避免污染后续逻辑。function effect(fn) { activeEffect fn fn() activeEffect null }1.3 reactive 与 ref 的完整实现reactive用的是Proxy拦截get和set。get里做依赖收集set里做依赖触发。我用Reflect去操作原始对象原因有两个一是保证this指向正确二是在严格模式下Reflect.set的返回值能正确反映赋值是否成功这在边界场景很关键。function reactive(target) { return new Proxy(target, { get(target, key, receiver) { const value Reflect.get(target, key, receiver) track(target, key) return value }, set(target, key, value, receiver) { const result Reflect.set(target, key, value, receiver) trigger(target, key) return result } }) }这只是最简版。实际面试如果时间充裕我会主动补一句Vue 3 的get里对 value 是对象的情况会递归调用reactive做懒代理而且用Reflect.get的返回值去判断避免重复代理。ref就更有意思了。为什么简单类型需要ref因为Proxy只能代理对象你把一个字符串包进去没有意义。Vue 的做法是把值包成一个带有value属性的对象然后用 getter/setter 来接管读写function ref(value) { const refObject { get value() { track(refObject, value) return value }, set value(newValue) { if (newValue ! value) { value newValue trigger(refObject, value) } } } return refObject }这里有个细节setter 里判断新旧值是否相等能避免无意义触发。比如count.value 1原本就是 1那就不该触发更新。简单类型用Object.is判断对象类型则要考虑深层变化。1.4 computed懒惰与缓存缺一不可面试官考computed时最爱问“和watch有什么区别”参考答案是computed有缓存并且默认惰性求值。落到手写层面computed 的难点就是怎么把“缓存”和“依赖触发”结合起来。思路是这样定义一个新的对象同样暴露value访问器。第一次访问 value 时执行getter并把结果缓存下来。当内部依赖变化时把缓存标记为脏并触发依赖了这个 computed 的外层 effect。下一次再访问 value发现脏了就重新计算否则直接返回缓存function computed(getter) { let dirty true let cacheValue const runner effect(getter) // 简化处理这里需要一个带有 scheduler 的 effect // Vue 内部会用 scheduler 把 dirty 置为 true而不是立即重新执行 return { get value() { if (dirty) { cacheValue getter() dirty false } track(this, value) return cacheValue } } }这个版本是“能说明原理”的版本真正面试时我会主动说生产级实现里effect 需要支持lazy和scheduler选项。lazy让 effect 不立即执行scheduler控制触发策略——当依赖变化时先标记 dirty而不是立刻跑 getter这样多次修改只会计算一次。能说到这一层基本就过关了。watch的底层其实是effect 自定义 scheduler核心是能拿到新旧值。面试手写到watch一般不会要求太深能说出“watch 监听的是一个数据源回调里拿到newVal和oldVal内部通过effect的scheduler实现异步刷新”就够了。2. 组件通信与自定义 v-model从 API 到原理2.1 组件沟通的八种姿势组件通信是面试题里的常青树但很多人的回答停留在“props 向下、emit 向上”。我会按层级把八种方式过一遍因为面试官可能追问“什么场景用什么”。props / emit父子直接通信最常用属于单向数据流。v-modelprops emit 的语法糖专治“双向绑定”。provide / inject跨层级的依赖注入适合祖孙组件共享数据但 Vue 3 中它不是响应式的需要配合ref或reactive使用。event busVue 3 移除了$on/$off但可以用mitt这类库继续用。适合无关联组件。Pinia / Vuex跨组件共享状态的统一方案有 devtools 支持适合中大型项目。slot父组件往子组件塞内容可以实现“组件外壳复用、内部内容灵活”的效果。$parent/$children直接访问组件实例不推荐耦合太高。ref直接调用子组件方法在某些性能敏感或命令式场景下好用比如表单校验组件。2.2 自定义 v-model 的底层逻辑v-model在input上叫双向绑定在组件上就是一条语法糖。Vue 3 中它展开后就是CustomInput :modelValuemessage update:modelValuemessage $event /所以子组件里要做的只有两件事接收modelValue属性触发update:modelValue事件。写一个自定义输入组件template input :valuemodelValue input$emit(update:modelValue, $event.target.value) / /template script setup defineProps({ modelValue: String }) defineEmits([update:modelValue]) /script用法CustomInput v-modelusername /面试如果到这里就打住基本只能算及格。拉开差距的关键是“多个 v-model”。Vue 3 支持在同一个组件上绑定多个模型名称从默认的modelValue改成显式命名CustomInput v-model:titleform.title v-model:contentform.content /子组件对应script setup defineProps({ title: String, content: String }) defineEmits([update:title, update:content]) /script多模型在什么业务场景常用我第一个想到的就是弹窗组件。控制显示隐藏的visible是一个 v-model表单内容对象是另一个 v-model还有可能有一个loading状态。如果只用默认的modelValue代码会非常拧巴。2.3 面试追问v-model 和 .sync 的关系这个问题现在问得少了但如果面试官年龄偏大可能还是会提到。Vue 2 时代v-model默认用valueinput事件后来组件多了发现要绑定不同属性于是搞出了.sync修饰符:title.synctitle等价于:titletitle update:titletitle $event。Vue 3 把.sync彻底收编进了v-model通过参数形式支持多个模型实现方式本质一样只是 API 更统一了。如果你在维护老项目可能还会遇到.sync语法知道这一层历史的演进答的时候会从容很多。还有一个常见的后续问题表单元素上v-model和valueinput的区别。答案是v-model会自动处理不同表单元素的默认行为比如 select 的 change 事件、checkbox 的 checked 属性等这属于编译期的语法糖优化不用我们手动做。3. 路由进阶参数传递、动态路由与权限控制3.1 query、params 与动态路由的区别Vue Router 的传参方式是面试高频特别是“ params 刷新会不会丢”这个问题几乎必问。我的回答逻辑是这样query拼在 URL 的?后面比如/list?page1size10。刷新不会丢因为它是 URL 的一部分。params 配合动态路由定义路径为/user/:id跳转时传{ params: { id: 7 } }URL 显示/user/7。刷新也不会丢因为 id 同样在 URL 里。params 不配合动态路由也就是路径里没有占位符直接router.push({ name: User, params: { id: 7 } })。这时候 params 存在内存里刷新页面就丢了。这是 Vue Router 的一个坑我见过不少项目在这里踩雷。如果面试官追问“怎么解决 params 刷新丢失”我一般给四个方案能放进 URL 就用 query必须用 params 就结合sessionStorage缓存服务端渲染场景可以存到 cookie终极方案是直接用 query 或者路径参数别去挑战框架限制。3.2 动态添加路由实现权限控制后台管理系统里最常见的权限控制方案是登录后根据角色从后端拿到可访问的路由表前端用addRoute动态添加。注意Vue Router 4 中addRoute返回一个删除函数调用它可以移除刚才添加的路由const removeRoute router.addRoute({ path: /admin, component: () import(/views/Admin.vue), meta: { roles: [admin] } })权限控制的完整链路是登录成功 → 拉取用户信息含角色和权限路由表 → 把路由表注册进 router → 动态生成菜单 → 每次路由跳转前在beforeEach里校验权限。这里有个关键问题动态路由注册是异步的首次刷新页面时路由表还没注册完用户访问目标地址可能会匹配不到。常规解法是在beforeEach里判断“路由是否已添加”没添加就先添加然后next({ ...to, replace: true })重新导航一次。面试答到这一层已经很能打了。如果再往下挖一点就是“菜单怎么生成”我的做法是把路由的meta里的title、icon、hidden等字段作为菜单配置遍历路由表自动生成而不是手写一份菜单配置去跟路由表对账两边一旦不一致维护成本很高。3.3 路由守卫的执行顺序与复用陷阱路由守卫分全局、路由配置、组件内三档。我常用的记忆方式是导航触发后先走全局beforeEach再走路由配置里的beforeEnter然后走组件内的beforeRouteEnter导航确认后走全局beforeResolve和afterEach。beforeRouteEnter拿不到this因为组件还没创建但可以在回调里访问实例beforeRouteUpdate则用于同一个组件在不同参数下复用时做更新逻辑。组件复用有个典型坑在/user/1跳转到/user/2时Vue 默认复用同一个组件实例created和mounted不会重新触发。这时候如果直接在created里根据路由 id 请求数据你会发现页面数据不刷新。解法就两种在beforeRouteUpdate里处理或者用watch监听route.params.id。我更推荐后者因为逻辑更直观而且组件从别的页面进入时也能正常工作。4. Vue 与 React面试必答的架构差异4.1 宏观设计思路的分岔路“Vue 和 React 的区别”基本属于互联网面试题里的保留节目我会建议不要只背对比表要抓住一根主线一个是自动追踪依赖的响应式系统一个是手动控制的单向数据流 不可变数据。Vue 的响应式让“状态 → 视图”的更新变得自然开发者不需要关心setState之后发生了什么数据变了视图自己会变。React 则强调“数据的不可变性”你要通过setState产生一份新数据然后重新走一遍渲染流程靠虚拟 DOM 的 diff 来找哪里变了。这不是谁优谁劣的问题而是设计哲学的不同Vue 选择帮开发者做更多事React 选择把控制权交给开发者。模板和 JSX 的差异也值得细说。Vue 使用模板语法静态分析友好编译器可以在编译阶段做很多优化比如静态节点提升、标记动态节点。React 用 JSX本质是 JavaScript 的表达能力所以动态逻辑写起来更灵活但也正因如此运行时需要做更多工作来判断哪里该更新。4.2 Fiber 到底是什么如果面试官让你解释 React Fiber 的作用他大概率想听的是“为什么 React 需要可中断的渲染”。在没有 Fiber 之前React 的协调过程是同步递归的一旦开始渲染就要把整棵组件树跑完期间无法中断如果组件树很大会长时间占用主线程造成页面卡顿。Fiber 的核心是把渲染工作拆解成一个个小单元结构上是一棵链表树。每个节点存着当前组件的状态、副作用、子节点、兄弟节点等这样 React 就可以在渲染过程中随时暂停、恢复、甚至丢弃优先级低的任务。配合优先级调度和时间切片React 能让高优先级的交互比如用户输入插队低优先级的更新比如列表数据刷新延后处理。这里我发现 Vue 同学最容易误解的一点认为 Fiber 是 React 独享的优化技巧Vue 没有对应的东西。实际上 Vue 3 的编译时优化和响应式系统让它天然不需要像 React 那样大费周章去做“协调过程可中断”因为 Vue 在编译阶段就知道哪些节点是动态的更新时可以精确跳过期节点根本不需要 diff 整棵树。4.3 数据流、v-model 与受控组件Vue 的v-model是“双向绑定”的语法糖React 则推崇受控组件value由 state 控制onChange去更新 state。写法上看起来繁琐但好处是数据流是单向的状态变化可预测、可调试。如果面试官问“你怎么看这种差异”我会从工程角度回答Vue 的 v-model 更香队编码效率尤其在表单场景少写很多样板代码React 的受控组件则会让“这个值是谁改的、什么时候改的”非常明确适合需要严格状态管理的场景。两种风格没有对错更多是团队习惯和项目类型的取舍。另外Vue 3 的组合式 API 和 React Hooks 经常被拿出来比较。相同点是都鼓励逻辑复用和按功能组织代码不同点是 React Hooks 有依赖数组和闭包陷阱Vue 的 setup 配合响应式对象更接近“声明式依赖”没有useEffect里那些心智负担。4.4 如何给出选型建议面试官还爱问“你们项目为什么选 Vue 而不是 React”这个问题我一般从三个角度回答团队技术栈和学习曲线、项目类型后台管理系统适合 Vue复杂交互和跨平台 App 场景 React 生态更成熟、以及性能敏感程度Vue 编译时优化对小体量应用更友好React 的大规模可中断渲染在重度交互场景有优势。不要只说“Vue 简单”那会显得你只会 API。5. 生命周期与自定义指令被问烂也要答出深度5.1 生命周期的完整执行顺序生命周期这块官方文档说得已经很清楚了但面试里大多数人只背顺序忽略了“为什么”和“实际怎么用”。我先给一张 Vue 3 选项式 API 的对照表阶段选项式 API组合式 API 中的对应创建前beforeCreatesetup()创建后createdsetup()挂载前beforeMountonBeforeMount挂载后mountedonMounted更新前beforeUpdateonBeforeUpdate更新后updatedonUpdated卸载前beforeUnmountonBeforeUnmount卸载后unmountedonUnmountedbeforeCreate和created在 Vue 3 组合式 API 里没有单独的生命周期钩子因为它们做的事就是setup本身。setup执行时机在beforeCreate之前相当于替代了这两个阶段。然后是父子组件的执行顺序这是一个高频追问。我试验过多次稳定结论是挂载阶段父beforeCreate→ 父created→ 父beforeMount→ 子beforeCreate→ 子created→ 子beforeMount→ 子mounted→ 父mounted更新阶段父beforeUpdate→ 子beforeUpdate→ 子updated→ 父updated卸载阶段父beforeUnmount→ 子beforeUnmount→ 子unmounted→ 父unmounted为什么要记这个顺序因为面试如果给你的场景是“父组件里有个弹窗组件弹窗关闭时想拿到子组件的某个状态放在哪个钩子做”你就该知道用updated还是nextTick。举一个我实际踩过的坑父组件的mounted里直接访问子组件的 DOM 内容结果拿不到。原因就是父组件的mounted虽然触发了但子组件的异步数据还没渲染完需要配合nextTick等待。5.2 自定义指令的完整钩子与业务实战自定义指令面试题的分水岭在于能不能说出 Vue 3 的完整勾子列表以及能不能举一个真实业务场景。Vue 3 自定义指令的钩子有七个created指令绑定到元素时beforeMount元素插入 DOM 之前mounted元素插入 DOM 之后beforeUpdate组件更新前updated组件更新后beforeUnmount组件卸载前unmounted组件卸载后每个钩子接收的参数是(el, binding, vnode, prevVnode)。binding里包含value、oldValue、arg、modifiers等这些是面试官嵌参的点。我做后台系统时写过几个高频指令第一个是权限指令app.directive(permission, { mounted(el, binding) { const requiredRole binding.value const userRole getUserRole() if (!userRole.includes(requiredRole)) { el.parentNode?.removeChild(el) } } })用法就是button v-permissionadmin删除/button。这个指令比手写v-if优雅得多权限判断逻辑集中在一个地方后续修改权限规则不用逐个页面找。第二个是防抖指令。搜索框高频请求、按钮重复点击都是经典场景app.directive(debounce, { mounted(el, binding) { const delay binding.value?.delay || 300 let timer null el.addEventListener(click, () { if (timer) clearTimeout(timer) timer setTimeout(() binding.value?.handler(), delay) }) } })第三个是点击外部关闭指令多用于弹窗和下拉面板。这类指令在调试时容易踩一个问题mounted时元素可能还没渲染完全绑定事件没问题但unmounted必须记得解绑否则会有内存泄漏。这里我再补充一个容易忽略的细节Vue 3 中自定义指令的updated钩子只在组件更新时触发不会在指令值本身变化时重新触发。所以如果你要根据指令绑定值的变化做 DOM 操作需要在updated里用binding.oldValue和binding.value手动比较。这个坑我在实际项目中踩过面试时主动提出来会显得你真的写过业务代码。6. 工程化高频题样式、调试、视频流与周边生态6.1 scoped 样式与样式穿透style scoped的原理一句话就能说清楚Vue 编译时会给每个组件生成一个唯一的>template div classbox你好/div /template style scoped .box { color: red; } /style编译后大概等价于.box[data-v-7b5c2a] { color: red; }这个机制带来的最大坑是“样式怎么穿透”。比如你在项目里用了第三方组件库想改它的内部样式但它的内部元素没有当前组件的>style scoped :deep(.el-dialog) { border-radius: 8px; } /styleVue 2 里常写的是::v-deep或者/deep/到了 Vue 3 统一成:deep()。这里我建议面试时主动提一下别乱用穿透——穿透本质是放弃样式隔离用得多了项目里就会出现“样式互相打架”的玄学问题排查起来非常痛苦。6.2 调试技巧DevTools 与断点Vue DevTools 是 Vue 项目调试的标配但它不是用来“看页面长什么样”的而是看你组件树里状态是怎样的。我常用的几个面板Components查看当前组件树、props、data、setup 返回值、状态可以直接改值观察视图变化。Pinia / Vuex查看全局状态、触发 mutation/action、时间旅行调试。Performance分析组件渲染耗时找出重复渲染的组件。Timeline追踪组件生命周期、路由变化、事件触发。如果面试问“线上 Vue 页面挂了你怎么排查”我的回答顺序是先看 Network 请求是不是挂了 → 再看 Console 报错 → 打开 DevTools 看组件状态对不对 → 用 Performance 找渲染瓶颈 → 必要时本地复现。不要一上来就猜要顺着链路定位。关于“打 debug”很多人只知道console.log但在 Vue 组件里更高效的是在源码里写debugger打断点然后配合浏览器的 Source 面板跟踪调用栈。比如怀疑某个computed反复计算就点一下调用栈里的函数能直接看到是谁在触发它。6.3 HLS 视频流播放与 WebRTC 集成“Vue 播放 m3u8”这种需求一般来自监控直播、教学视频、活动直播系统。m3u8 不是视频文件格式而是一个索引文件里面记录了一堆 ts 分片的 URL。浏览器原生不支持直接播放常规方案是引入hls.jsimport Hls from hls.js const videoRef ref(null) const playM3u8 (url) { if (Hls.isSupported()) { const hls new Hls() hls.loadSource(url) hls.attachMedia(videoRef.value) } else if (videoRef.value.canPlayType(application/vnd.apple.mpegurl)) { // Safari 原生支持 videoRef.value.src url } }这里有两个高频坑跨域和CORS。如果 m3u8 地址不带正确的 CORS 头hls.js会拿不到分片数据报 403 或网络错误。还有播放器必须muted才能自动播放浏览器自动播放策略限制页面首次进入时最好加上muted属性。另一个音视频场景是 WebRTC我理解很多 Vue 项目里会用它做实时音视频比如在线课堂、视频客服。在 Vue 里集成 WebRTC最核心的一步是getUserMedia拿到本地媒体流然后塞进video标签const stream await navigator.mediaDevices.getUserMedia({ video: true, audio: true }) videoRef.value.srcObject stream这里有个 Vue 特有的坑组件卸载时一定要把媒体流关掉否则摄像头和麦克风会被一直占着。我在onBeforeUnmount里统一做了清理onBeforeUnmount(() { stream.getTracks().forEach((track) track.stop()) })6.4 前端周边MinIO、微信登录、前后端分离发布热词里的vue java minio是我很常见的组合场景——Java 后端 Vue 前端文件走 MinIO 对象存储。这种方案里重要的是不要绕过后端直接传文件到 MinIO 公网桶。我的做法是后端生成一个预签名 URL前端拿到后直接 PUT 文件到 MinIO上传成功后再通知后端登记文件信息。这样文件数据流不会经过应用服务器压力小很多。微信登录wxlogin.js集成也是后台系统常碰到的需求。前端要做的是引入微信提供的登录脚本实例化登录组件拿到code之后交给后端由后端换openid和会话凭证。Vue 端要注意wxlogin.js是往指定容器里注入 iframe容器渲染时机不对会拿不到实例需要在nextTick或mounted之后初始化。前后端分离发布有个经典的坑前端npm run build产出 dist后端 JavaSpring Boot把它放到static目录下托管或者在 Nginx 里单独托管前端并代理/api到后端。在 Windows 服务器上发布 Vue 项目时最常见的问题是路径和缓存base配置不对导致静态资源 404Nginx 没配try_files导致刷新路由页面白屏。后者几乎是必考题标准解法是location / { try_files $uri $uri/ /index.html; }7. 数据更新视图不刷新排查思路与 nextTick7.1 响应式丢失的几类典型场景页面数据改了半天视图不动这是 Vue 开发里最常见的玄学问题。面试官如果让你排查本质上考的是你理不理解响应式系统的边界。第一个场景是 Vue 2 直接给对象新增属性视图不更新。Vue 3 用 Proxy 解决了这个问题但仍有边界const state reactive({ user: { name: 张三 } }) const { user } state user.name 李四 // 仍然响应式因为 user 是嵌套代理对象但如果解构的是基础类型const state reactive({ count: 0 }) let { count } state count 1 // 这里的 count 是普通变量和响应式不沾边这类问题我经常在同事代码里看到。解法就是用toRefs包一层再解构const { count } toRefs(state) count.value 1第二个场景是深层嵌套对象的批量替换。reactive的set是整体替换键值对象内部嵌套的响应式转换是在 get 时才发生的所以如果你在reactive对象里直接塞了一个普通对象需要重新触发一次。简单说能不整体赋值就别整体赋值。7.2 nextTick 与异步更新队列Vue 的 DOM 更新不是同步的响应式数据变化后Vue 会把同一个事件循环里触发的更新合并等到nextTick时才真正更新 DOM。这个机制的好处是性能避免重复渲染代价是“你改了数据立刻读 DOM拿到的还是旧值”。所以面试题“更新数据后马上操作 DOM 拿不到最新值怎么办”的答案就是async function update() { msg.value 新内容 await nextTick() // 此时 DOM 已更新 }Vue 3 的nextTick返回 Promise也可以这样用。底层实现其实就是把回调塞进微任务队列或者降级到宏任务。面试追问到这里能回答“它是基于 Promise.resolve().then() 的微任务实现老版本 Vue 2.5 之前还有macroTimerFunc兜底”就够了。7.3 key 的作用与 diff 优化v-for为什么要加 key这题看似简单但面试官想听的其实不是“性能优化”而是“key 怎么影响 diff 和状态复用”。没有 key 时Vue 对数组中的节点做首尾对比尽可能复用元素靠“就地复用”减少 DOM 操作。但有状态组件或表单元素存在时就地复用会导致内部状态错乱——比如列表项里有个 input你往列表头部插一条数据旧 input 的输入内容会跑到新数据上。有了唯一的 keyVue 才能精确判定“这个元素是新增的还是位置变了”从而正确移动和复用。这里我建议答得更细一点key 要用稳定且唯一的业务 ID尽量别用数组 index。用 index 做 key在尾部追加没问题但中间插入、删除、排序时元素和 key 的对应关系会错乱引发状态异常。我在实际项目里见过因为 index key 导致的 bug排查起来非常头大。8. 面试作答策略与经验补充写到这里其实该讲的都讲得差不多了最后分享一点我实际面试别人和被面试的经验。面试官问技术题判断标准不是“你答没答对”而是“你能不能把一个点讲透”。以手写响应式为例只要你能把Proxy、Reflect、track、trigger之间关系讲明白再把ref和computed的底层工作方式说清楚就胜过你把一整段源码背下来。不要担心自己写的实现没法和源码一一对齐面试官想验证的是你的建模能力而不是记忆力。另外如果碰到“你用过哪些 Vue 周边生态”这类开放性问题尽量往工程实践上靠。比如提“我用 Vant 的 Picker 做过复选”就顺带说一下实现思路——Picker 本身是单选列表复选一般是在confirm阶段维护一个选中数组或者改造 Picker 的列内容加入 checkbox。这种回答比“我熟悉 Vant”有说服力得多。这个系列我还会继续往下写。如果你准备面试比起刷题更建议照着本文把代码自己跑一遍尤其是第 1 节的 mini 响应式系统。写一遍能发现很多看文档发现不了的问题比如targetMap的 key 到底该传原始对象还是代理对象activeEffect在嵌套 effect 里怎么恢复。这些问题只有落到代码里才有意义。
