简介面向Vue面试备考的PDF资料围绕Vue项目开发中常见难点展开适合正在准备前端岗位面试、希望系统梳理Vue核心原理的开发者。资料以问答形式呈现先拆解Vue的基本原理即通过Object.defineProperty进行数据劫持配合发布者-订阅者模式实现响应式更新随后说明双向数据绑定的完整链路Observer递归遍历对象并添加getter/setterCompile解析模板并绑定更新函数Watcher负责在依赖变化时触发视图刷新。针对研发中容易忽略的细节也指出Object.defineProperty无法监听数组下标修改和对象新增属性的缺陷并对比Vue 3.0改用Proxy带来的能力差异。同时横向对比MVVM、MVC、MVP三种架构解释ViewModel如何解耦Model与View帮助读者答好概念辨析题另外还区分了Computed与Watch在缓存、异步和深层监听上的用法差异。资源为单份PDF文档共1个文件压缩包约1.76MB便于下载后离线阅读或打印目前已有9022人学习使用知识点集中且紧扣高频考点适合作为面试冲刺前的提纲式复习材料。1. vue项目难点面试先解决「会用但讲不清」「vue项目中遇到的难点面试.pdf」这类标题在搜索里几乎每年都会换着花样出现背题解决不了问题「为什么 prop 不能直接改」「为什么项目里配置了动态路由刷新一下就 404」这类题答案并不在题目本身而在 Vue 的实现细节里。这篇文章不打算复述某一份问题清单而是把 Vue 项目里真正会卡住面试的几个难点拆开讲响应式原理手写、组件通信选型、路由权限落地、性能归因。适合准备跳槽、想把项目经验讲成体系的人也适合正在被线上问题追着跑、想快速定位的人。前半部分偏原理后半部分全是能直接抄进项目的代码和配置。2. 响应式原理手写reactive、ref、computed 的面试过关写法2.1 Vue 2 和 Vue 3 的响应式差异面试问的是「为什么改数组不生效」面试只要问到 Vue十个里面有九个会先碰响应式。Vue 2 用 Object.defineProperty 拦截的是「已存在的属性」所以新增属性、按下标改数组不会触发更新官方只能补 $set、$delete 这类 API 来兜底。Vue 3 换成 Proxy 之后整个对象的新增、删除、读取、写入都能被拦到这也是「Vue 3 为什么不再需要 $set」的标准答案。维度Vue 2 definePropertyVue 3 Proxy拦截范围已存在的属性数组方法需重写对象整体含新增、删除、in、for...in新增属性需要 $setset 钩子天然覆盖数组下标赋值监听不到可以触发更新初始化开销递归遍历所有 key惰性代理访问到哪层才代理哪层兼容性IE9不支持 IE选型层面Proxy 不是性能银弹读取路径上每次 get 都有额外函数开销极大数据量的表格仍要配合 shallowRef 或 markRaw 使用。面试里还有一个高频对比React 靠显式 setState 通知更新Vue 是运行时自动收集依赖Vue 和 React 的差异不在调度模型本身而在触发机制别把 Fiber 和依赖收集混为一谈。2.2 脱离 vue 源码用原生 Proxy 手写 reactive 和 effect 的最小实现「脱离 vue 源码使用原生 proxy 手写 reactive、ref、effect、computed」是近几年出现频率很高的面试题。最小实现不复杂核心只有三件事get 时收集依赖set 时触发更新用一个全局变量标记当前正在执行的 effect。代码如下// 依赖仓库target - key - effects const targetMap new WeakMap() let activeEffect null function track(target, key) { if (!activeEffect) return let depsMap targetMap.get(target) if (!depsMap) { depsMap new Map() targetMap.set(target, depsMap) } let deps depsMap.get(key) if (!deps) { deps new Set() depsMap.set(key, deps) } deps.add(activeEffect) } function trigger(target, key) { const depsMap targetMap.get(target) if (!depsMap) return const effects depsMap.get(key) if (effects) { effects.forEach((fn) fn()) } } function effect(fn) { const runner () { activeEffect runner fn() activeEffect null } runner() return runner } function reactive(target) { return new Proxy(target, { get(target, key, receiver) { track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { const result Reflect.set(target, key, value, receiver) trigger(target, key) return result }, }) } function ref(value) { return reactive({ value }) }代码里两个参数需要重点说明。第一是 targetMap 为什么用 WeakMapkey 必须是对象且 target 被垃圾回收时WeakMap 里的记录会随 key 一起消失不会造成内存泄漏。第二是 Reflect.get 的 receiver 参数如果对象里有 getter 访问 thisreceiver 会把 this 指向代理对象依赖才能正确落回当前 target直接return target[key]会出现「改了子对象页面不更新」这类项目里最难查的 bug。ref 在最小实现里只是reactive({ value })所以访问和修改都要走.value。面试官如果追问「ref 为什么能处理基本类型」答案就是它把基本类型包装成了对象hook 到了同样的 get/set 链路里。2.3 给 trigger 加调度器computed 的「缓存」和「延迟」才有意义如果 computed 每次都重新计算就不会有性能优势。真实 Vue 在 trigger 时不直接执行 effect而是看它有没有 scheduler没有 scheduler 就执行 effect 本身有 scheduler 就调用 scheduler把「更新时机」交给业务决定。function effect(fn, options {}) { const runner () { activeEffect runner fn() activeEffect null } runner.options options runner() return runner } function trigger(target, key) { const depsMap targetMap.get(target) if (!depsMap) return const effects depsMap.get(key) if (effects) { effects.forEach((runner) { if (runner.options runner.options.scheduler) { runner.options.scheduler() } else { runner() } }) } } function computed(getter) { let value let dirty true const runner effect(() { value getter() }, { scheduler() { dirty true }, }) return { get value() { if (dirty) { value getter() dirty false } return value }, } }这个版本里effect 创建时执行一次 runner完成对 getter 内部响应式数据的依赖收集依赖变化时 scheduler 只把 dirty 置为 true不立即重算下次真正读.value才执行 getter 并缓存结果。面试讲解时可以用一句话概括computed 就是把「立即执行的 trigger」换成了「延迟执行的 scheduler」dirty 标记负责缓存。提示手写时不用追求和 Vue 源码一致能讲清「get 收集、set 触发、调度器延迟」三层关系比默写出完整实现更有区分度。2.4 手写实现最容易被追问的四个边界第一个边界是 activeEffect 的恢复问题。上面代码用activeEffect null兜底但两个 effect 嵌套时内层执行完会把外层的上下文清掉。这里脚手架级别的动态路由注册顺序、组件初始化顺序正好是另一个高频话题。真实实现会用 effect 栈配合 try/finally 恢复面试被追问时照这个方向答。第二个边界是数组的 length 连坐arr[3] 1会同时触发下标和 length 两个 key 的依赖一个 set 可能让多个 effect 各跑一遍。第三个边界是分支切换effect 里 if 条件变化后旧分支的依赖还留在依赖集里生产实现需要在每次执行前 cleanup 上次的 deps。第四个边界是死循环effect 内既读又写同一个 keytrigger 会再次执行同一个 runner栈溢出Vue 内部对 activeEffect 做了递归判断才能兜住。3. 组件通信选型$attrs、provide/inject 与 Pinia 的项目边界3.1 七种通信方式先排优先级别上来就 provide组件通信不是不会写而是不知道场景该用哪个。我在项目里一般按以下优先级选型通信方式典型场景注意事项props / emit父子组件表单组件单向数据流子组件不能直接改 propsv-model:xxx封装输入框、弹窗、开关可以多个 v-model 同时存在$attrs / inheritAttrs跨层透传 HTML 属性、事件多根节点时必须显式 v-bind$attrsprovide / inject祖先向深层后代传数据默认非响应式要传 ref/reactive 才有响应EventBus / mitt兄弟组件高频事件记得 off防止内存泄漏Pinia全局共享、跨页面状态登录态、权限点、字典类数据slots / scoped slots布局与结构复用不只是「传内容」还能反向传数据面试时先反问业务场景再选型是加分项。常见误区是把 provide/inject 当全局状态管理用一旦组件树深层有多处需要修改 inject 的值数据流会变得很难追踪。项目里兜底方案只有一个Pinia。前后端分离的项目里接口数据统一放 api 目录跨模块共享的业务数据才进 store别把页面所有请求结果都塞进来。3.2 vue 透传与 $attrsinheritAttrs:false 到底解决了什么封装基础组件时最常见的问题父组件传了一堆 placeholder、disabled、事件子组件只想让它们落到 input 上而不是外层 div。Vue 3 默认会把未声明为 props 的 attribute 自动挂到组件根元素上用 $attrs 可以拿到这些透传属性。!-- BaseInput.vue -- script setup defineOptions({ inheritAttrs: false, }) defineProps({ label: String, }) /script template label classfield input v-bind$attrs / /label /template父组件使用BaseInput label用户名 placeholder请输入 focusonFocus /defineOptions是 Vue 3.3 的写法作用是让组件不自动继承 attrs然后由自己决定绑到哪里。如果不设置 inheritAttrs:falseplaceholder、class 会全部掉到 label 上事件虽然也能透传但绑定的 DOM 位置不对。多根节点时 Vue 直接不再自动继承必须手动v-bind$attrs。这里面试题经常延伸到的点是$attrs 里包含的是组件未声明为 props 的所有属性class、style、原生事件都在里面。3.3 用多个 v-model 收窄双向绑定参数避免 props 反向修改业务里封装一个弹窗往往同时需要 visible、title、loading 多个双向绑定。Vue 3 的 v-model 本质是modelValue加update:modelValue的语法糖改成具名之后就能同时存在多个。!-- Modal.vue -- script setup const props defineProps({ visible: Boolean, title: String, }) const emit defineEmits([update:visible, update:title]) /script template Teleport tobody div v-ifvisible classmodal input :valuetitle inputemit(update:title, $event.target.value) / button clickemit(update:visible, false)关闭/button /div /Teleport /template父组件里这样用Modal v-model:visibleshow v-model:titledocTitle /要点是「子组件绝不直接改 props只 emit 事件向上扔值」。有些同学会写 watch 去同步 props把 props 的值复制到 data 里再在回调里改回来形成数据反流这是项目维护性下降的根源。弹窗类组件要支持显隐控制时把当前编辑的目标传入每次打开重置内部状态显示状态用 v-model 交给外部控制内部只在关闭时 emit 一次 false 即可。3.4 Pinia 和 provide 的状态边界跨页面用 store跨层级用 provide业务里常见的选择困难是用户信息放 Pinia 还是 provide我一般这样划分需要被多个路由页面共享、且刷新后要从接口恢复的放 Pinia只在一次页面内跨多层组件共享、且大部分时间只读的比如系统主题、当前租户配置、api 实例用 provide/inject。不要把后端返回的一次性接口数据放 store否则多人协作时 store 会变成一个垃圾桶。面试时讲清楚这个边界比背 API 用法更有说服力。4. 路由守卫与动态路由登录态恢复、参数丢失和权限菜单4.1 vue 路由参数刷新丢失params 和 query 怎么选vue 路由参数在 Vue Router 4 里有一个容易踩的坑router.push({ name: Detail, params: { id: row.id } })之后页面内route.params.id能拿到值但刷新浏览器之后再读就是 undefined。如果页面数据依赖这个 id 拉取就会出现白屏或接口报错。// 刷新后 params 会丢失不要用 params 传关键业务参数 router.push({ name: Detail, params: { id: row.id } }) // 项目里常用 query刷新后依然存在 router.push({ path: /detail, query: { id: row.id } }) const id route.query.id关键业务参数该不该进 URL取决于业务场景分享后必须还原页面状态的用 query只是临时筛选条件、不希望 URL 被弄脏的放 Pinia 或者 sessionStorage 都行。params 适合用来传不参与业务逻辑的纯展示数据比如从列表页进入详情页时的来源标记。4.2 vue 路由拦截器里做登录态恢复避免刷新白屏刷新后 Pinia 里的 userInfo 会清空如果页面依赖用户信息渲染菜单或权限按钮就会闪一下空白。常见做法是把「拉取用户信息」放进全局前置守卫里每次进入页面时判断 store 里有没有数据没有就补拉一次。// router/index.js const whiteList [/login, /register] router.beforeEach(async (to) { const token localStorage.getItem(token) const userStore useUserStore() if (!token) { if (whiteList.includes(to.path)) return true return { path: /login, query: { redirect: to.fullPath } } } if (token !userStore.userInfo) { try { await userStore.fetchUserInfo() } catch (error) { userStore.logout() return { path: /login } } } return true })Vue Router 4 的守卫支持直接 return 路由对象或布尔值不需要再调 next。这套代码的核心是防死循环跳 /login 时带 redirect 参数登录成功后再跳回原页面。fetchUserInfo 失败要清 token 再跳登录页否则 token 一直存在每次进入守卫都会再拉一次失败接口形成请求风暴。注意 fetchUserInfo 只拉一次用一个userInfoLoaded状态或者在 store 里判断 userInfo 是否有值避免同一页面内跳转重复请求。4.3 addRoute 注册动态菜单组件映射表和 404 注册顺序权限菜单的落地路径一般是登录成功 - 后端返回菜单树 - 前端遍历菜单树动态注册路由。这里最常见的坑是写() import(\/views/${item.component}.vue)字符串拼路径在 webpack 和 vite 里都无法静态分析要么打包产物异常要么直接报模块解析错误。// 组件映射表key 与后端返回的 component 字段对应 const componentMap { sys/index: () import(/views/sys/index.vue), order/list: () import(/views/order/list.vue), } const dynamicRoutes [] menu.forEach((item) { const route { path: item.path, name: item.name, component: componentMap[item.component], } dynamicRoutes.push(route) router.addRoute(route) }) // 404 兜底必须在动态路由注册之后 router.addRoute({ path: /:pathMatch(.*)*, name: NotFound, component: NotFound })addRoute 常见问题处理方式同名路由重复注册为每条动态路由带 name登出时 removeRoute(name)动态 import 字符串拼接用组件映射表key 由后端约定404 注册时机必须在 addRoute 之后否则会被 pathMatch 抢先匹配菜单刷新后重复注册登出时清理动态路由重新登录再注册退出登录时要把动态路由全部移除否则下个账号登录后菜单权限不同会出现路由重叠警告或访问到上一个账号的路由。动态路由注册顺序也直接影响 404 页面的出镜率先注册 404再注册动态路由pathMatch 兜底会拦截所有未匹配路由导致后续动态路由全部失效。5. 性能归因收尾懒加载、大屏适配和面板验证5.1 用懒加载和 scale 方案处理首屏与大屏vue 项目首屏变慢很大一部分来自路由全量打包。路由级懒加载是最快见效的手段component: () import(/views/user/index.vue)。注意按业务模块拆分而不是每个页面都拆否则拆出来的 chunk 又小又多请求数反而上涨。大屏项目里常见的适配方案是 transform: scale。基于 1920 x 1080 的设计稿做固定尺寸布局再把容器缩放铺满屏幕。这种方案比 postcss-px-to-viewport 更稳图表组件拿到的是整数尺寸不会因为表单缩放产生小数像素模糊。// utils/useScale.js export function useScreenScale(wrapper, screen, designWidth 1920, designHeight 1080) { const render () { const scaleX wrapper.clientWidth / designWidth const scaleY wrapper.clientHeight / designHeight screen.style.transform scale(${scaleX}, ${scaleY}) screen.style.transformOrigin left top } window.addEventListener(resize, render) render() }大屏适配插件和安全区、弹窗、全屏切换要单独处理弹窗如果用 fixed 定位会跑出缩放容器需要挂到 body 下的同层级节点。5.2 m3u8 播放卡顿从挂载时机和 Network 两级排查vue 播放 m3u8 这类流媒体卡顿多数不是播放器库的问题而是引入时机不对。浏览器支持 HLS 的前提下hls.js 这类库体积不小如果首屏就把播放器实例打进主包资源竞争会直接拖慢页面加载。排查步骤就两步先开 Network看 m3u8 的请求是不是在首屏阶段就发出再在 Performance 面板录制播放过程看主线程里 video 相关的任务有没有长阻塞。常见做法是import(hls.js)动态引入播放器页面滚动到视频区域或点击播放时才实例化。video 控制条样式自定义也是高频问题播放按钮居中、进度条皮肤统一用 CSS 变量和伪元素覆盖默认样式即可不需要引入额外 UI 库。5.3 用 Performance 面板打 debug对比优化前后性能优化没有数据对比就是玄学。我一般固定一个操作路径暗色模式下录制同样的操作对比 Network 瀑布图和主线程的长任务分布。Network 里看最长的等待发生在哪个阶段Performance 里看 task 的颜色深浅长任务标红的地方就是阻塞点。给关键接口和渲染节点打上计时标记是快速归因的手段// utils/timing.js export const timing (label) { const start performance.now() return () console.debug([timing] ${label}, performance.now() - start) }在列表页接口请求前调用const end timing(list-load)接口返回后执行end()就能在 Console 里看到耗时的精确差值。优化前后各打一轮日志和 Network 瀑布图对比哪个阶段变短了哪段代码有问题一目了然。本文还有配套的精品资源点击获取
Vue项目难点拆解：响应式原理、组件通信与路由权限实战
简介面向Vue面试备考的PDF资料围绕Vue项目开发中常见难点展开适合正在准备前端岗位面试、希望系统梳理Vue核心原理的开发者。资料以问答形式呈现先拆解Vue的基本原理即通过Object.defineProperty进行数据劫持配合发布者-订阅者模式实现响应式更新随后说明双向数据绑定的完整链路Observer递归遍历对象并添加getter/setterCompile解析模板并绑定更新函数Watcher负责在依赖变化时触发视图刷新。针对研发中容易忽略的细节也指出Object.defineProperty无法监听数组下标修改和对象新增属性的缺陷并对比Vue 3.0改用Proxy带来的能力差异。同时横向对比MVVM、MVC、MVP三种架构解释ViewModel如何解耦Model与View帮助读者答好概念辨析题另外还区分了Computed与Watch在缓存、异步和深层监听上的用法差异。资源为单份PDF文档共1个文件压缩包约1.76MB便于下载后离线阅读或打印目前已有9022人学习使用知识点集中且紧扣高频考点适合作为面试冲刺前的提纲式复习材料。1. vue项目难点面试先解决「会用但讲不清」「vue项目中遇到的难点面试.pdf」这类标题在搜索里几乎每年都会换着花样出现背题解决不了问题「为什么 prop 不能直接改」「为什么项目里配置了动态路由刷新一下就 404」这类题答案并不在题目本身而在 Vue 的实现细节里。这篇文章不打算复述某一份问题清单而是把 Vue 项目里真正会卡住面试的几个难点拆开讲响应式原理手写、组件通信选型、路由权限落地、性能归因。适合准备跳槽、想把项目经验讲成体系的人也适合正在被线上问题追着跑、想快速定位的人。前半部分偏原理后半部分全是能直接抄进项目的代码和配置。2. 响应式原理手写reactive、ref、computed 的面试过关写法2.1 Vue 2 和 Vue 3 的响应式差异面试问的是「为什么改数组不生效」面试只要问到 Vue十个里面有九个会先碰响应式。Vue 2 用 Object.defineProperty 拦截的是「已存在的属性」所以新增属性、按下标改数组不会触发更新官方只能补 $set、$delete 这类 API 来兜底。Vue 3 换成 Proxy 之后整个对象的新增、删除、读取、写入都能被拦到这也是「Vue 3 为什么不再需要 $set」的标准答案。维度Vue 2 definePropertyVue 3 Proxy拦截范围已存在的属性数组方法需重写对象整体含新增、删除、in、for...in新增属性需要 $setset 钩子天然覆盖数组下标赋值监听不到可以触发更新初始化开销递归遍历所有 key惰性代理访问到哪层才代理哪层兼容性IE9不支持 IE选型层面Proxy 不是性能银弹读取路径上每次 get 都有额外函数开销极大数据量的表格仍要配合 shallowRef 或 markRaw 使用。面试里还有一个高频对比React 靠显式 setState 通知更新Vue 是运行时自动收集依赖Vue 和 React 的差异不在调度模型本身而在触发机制别把 Fiber 和依赖收集混为一谈。2.2 脱离 vue 源码用原生 Proxy 手写 reactive 和 effect 的最小实现「脱离 vue 源码使用原生 proxy 手写 reactive、ref、effect、computed」是近几年出现频率很高的面试题。最小实现不复杂核心只有三件事get 时收集依赖set 时触发更新用一个全局变量标记当前正在执行的 effect。代码如下// 依赖仓库target - key - effects const targetMap new WeakMap() let activeEffect null function track(target, key) { if (!activeEffect) return let depsMap targetMap.get(target) if (!depsMap) { depsMap new Map() targetMap.set(target, depsMap) } let deps depsMap.get(key) if (!deps) { deps new Set() depsMap.set(key, deps) } deps.add(activeEffect) } function trigger(target, key) { const depsMap targetMap.get(target) if (!depsMap) return const effects depsMap.get(key) if (effects) { effects.forEach((fn) fn()) } } function effect(fn) { const runner () { activeEffect runner fn() activeEffect null } runner() return runner } function reactive(target) { return new Proxy(target, { get(target, key, receiver) { track(target, key) return Reflect.get(target, key, receiver) }, set(target, key, value, receiver) { const result Reflect.set(target, key, value, receiver) trigger(target, key) return result }, }) } function ref(value) { return reactive({ value }) }代码里两个参数需要重点说明。第一是 targetMap 为什么用 WeakMapkey 必须是对象且 target 被垃圾回收时WeakMap 里的记录会随 key 一起消失不会造成内存泄漏。第二是 Reflect.get 的 receiver 参数如果对象里有 getter 访问 thisreceiver 会把 this 指向代理对象依赖才能正确落回当前 target直接return target[key]会出现「改了子对象页面不更新」这类项目里最难查的 bug。ref 在最小实现里只是reactive({ value })所以访问和修改都要走.value。面试官如果追问「ref 为什么能处理基本类型」答案就是它把基本类型包装成了对象hook 到了同样的 get/set 链路里。2.3 给 trigger 加调度器computed 的「缓存」和「延迟」才有意义如果 computed 每次都重新计算就不会有性能优势。真实 Vue 在 trigger 时不直接执行 effect而是看它有没有 scheduler没有 scheduler 就执行 effect 本身有 scheduler 就调用 scheduler把「更新时机」交给业务决定。function effect(fn, options {}) { const runner () { activeEffect runner fn() activeEffect null } runner.options options runner() return runner } function trigger(target, key) { const depsMap targetMap.get(target) if (!depsMap) return const effects depsMap.get(key) if (effects) { effects.forEach((runner) { if (runner.options runner.options.scheduler) { runner.options.scheduler() } else { runner() } }) } } function computed(getter) { let value let dirty true const runner effect(() { value getter() }, { scheduler() { dirty true }, }) return { get value() { if (dirty) { value getter() dirty false } return value }, } }这个版本里effect 创建时执行一次 runner完成对 getter 内部响应式数据的依赖收集依赖变化时 scheduler 只把 dirty 置为 true不立即重算下次真正读.value才执行 getter 并缓存结果。面试讲解时可以用一句话概括computed 就是把「立即执行的 trigger」换成了「延迟执行的 scheduler」dirty 标记负责缓存。提示手写时不用追求和 Vue 源码一致能讲清「get 收集、set 触发、调度器延迟」三层关系比默写出完整实现更有区分度。2.4 手写实现最容易被追问的四个边界第一个边界是 activeEffect 的恢复问题。上面代码用activeEffect null兜底但两个 effect 嵌套时内层执行完会把外层的上下文清掉。这里脚手架级别的动态路由注册顺序、组件初始化顺序正好是另一个高频话题。真实实现会用 effect 栈配合 try/finally 恢复面试被追问时照这个方向答。第二个边界是数组的 length 连坐arr[3] 1会同时触发下标和 length 两个 key 的依赖一个 set 可能让多个 effect 各跑一遍。第三个边界是分支切换effect 里 if 条件变化后旧分支的依赖还留在依赖集里生产实现需要在每次执行前 cleanup 上次的 deps。第四个边界是死循环effect 内既读又写同一个 keytrigger 会再次执行同一个 runner栈溢出Vue 内部对 activeEffect 做了递归判断才能兜住。3. 组件通信选型$attrs、provide/inject 与 Pinia 的项目边界3.1 七种通信方式先排优先级别上来就 provide组件通信不是不会写而是不知道场景该用哪个。我在项目里一般按以下优先级选型通信方式典型场景注意事项props / emit父子组件表单组件单向数据流子组件不能直接改 propsv-model:xxx封装输入框、弹窗、开关可以多个 v-model 同时存在$attrs / inheritAttrs跨层透传 HTML 属性、事件多根节点时必须显式 v-bind$attrsprovide / inject祖先向深层后代传数据默认非响应式要传 ref/reactive 才有响应EventBus / mitt兄弟组件高频事件记得 off防止内存泄漏Pinia全局共享、跨页面状态登录态、权限点、字典类数据slots / scoped slots布局与结构复用不只是「传内容」还能反向传数据面试时先反问业务场景再选型是加分项。常见误区是把 provide/inject 当全局状态管理用一旦组件树深层有多处需要修改 inject 的值数据流会变得很难追踪。项目里兜底方案只有一个Pinia。前后端分离的项目里接口数据统一放 api 目录跨模块共享的业务数据才进 store别把页面所有请求结果都塞进来。3.2 vue 透传与 $attrsinheritAttrs:false 到底解决了什么封装基础组件时最常见的问题父组件传了一堆 placeholder、disabled、事件子组件只想让它们落到 input 上而不是外层 div。Vue 3 默认会把未声明为 props 的 attribute 自动挂到组件根元素上用 $attrs 可以拿到这些透传属性。!-- BaseInput.vue -- script setup defineOptions({ inheritAttrs: false, }) defineProps({ label: String, }) /script template label classfield input v-bind$attrs / /label /template父组件使用BaseInput label用户名 placeholder请输入 focusonFocus /defineOptions是 Vue 3.3 的写法作用是让组件不自动继承 attrs然后由自己决定绑到哪里。如果不设置 inheritAttrs:falseplaceholder、class 会全部掉到 label 上事件虽然也能透传但绑定的 DOM 位置不对。多根节点时 Vue 直接不再自动继承必须手动v-bind$attrs。这里面试题经常延伸到的点是$attrs 里包含的是组件未声明为 props 的所有属性class、style、原生事件都在里面。3.3 用多个 v-model 收窄双向绑定参数避免 props 反向修改业务里封装一个弹窗往往同时需要 visible、title、loading 多个双向绑定。Vue 3 的 v-model 本质是modelValue加update:modelValue的语法糖改成具名之后就能同时存在多个。!-- Modal.vue -- script setup const props defineProps({ visible: Boolean, title: String, }) const emit defineEmits([update:visible, update:title]) /script template Teleport tobody div v-ifvisible classmodal input :valuetitle inputemit(update:title, $event.target.value) / button clickemit(update:visible, false)关闭/button /div /Teleport /template父组件里这样用Modal v-model:visibleshow v-model:titledocTitle /要点是「子组件绝不直接改 props只 emit 事件向上扔值」。有些同学会写 watch 去同步 props把 props 的值复制到 data 里再在回调里改回来形成数据反流这是项目维护性下降的根源。弹窗类组件要支持显隐控制时把当前编辑的目标传入每次打开重置内部状态显示状态用 v-model 交给外部控制内部只在关闭时 emit 一次 false 即可。3.4 Pinia 和 provide 的状态边界跨页面用 store跨层级用 provide业务里常见的选择困难是用户信息放 Pinia 还是 provide我一般这样划分需要被多个路由页面共享、且刷新后要从接口恢复的放 Pinia只在一次页面内跨多层组件共享、且大部分时间只读的比如系统主题、当前租户配置、api 实例用 provide/inject。不要把后端返回的一次性接口数据放 store否则多人协作时 store 会变成一个垃圾桶。面试时讲清楚这个边界比背 API 用法更有说服力。4. 路由守卫与动态路由登录态恢复、参数丢失和权限菜单4.1 vue 路由参数刷新丢失params 和 query 怎么选vue 路由参数在 Vue Router 4 里有一个容易踩的坑router.push({ name: Detail, params: { id: row.id } })之后页面内route.params.id能拿到值但刷新浏览器之后再读就是 undefined。如果页面数据依赖这个 id 拉取就会出现白屏或接口报错。// 刷新后 params 会丢失不要用 params 传关键业务参数 router.push({ name: Detail, params: { id: row.id } }) // 项目里常用 query刷新后依然存在 router.push({ path: /detail, query: { id: row.id } }) const id route.query.id关键业务参数该不该进 URL取决于业务场景分享后必须还原页面状态的用 query只是临时筛选条件、不希望 URL 被弄脏的放 Pinia 或者 sessionStorage 都行。params 适合用来传不参与业务逻辑的纯展示数据比如从列表页进入详情页时的来源标记。4.2 vue 路由拦截器里做登录态恢复避免刷新白屏刷新后 Pinia 里的 userInfo 会清空如果页面依赖用户信息渲染菜单或权限按钮就会闪一下空白。常见做法是把「拉取用户信息」放进全局前置守卫里每次进入页面时判断 store 里有没有数据没有就补拉一次。// router/index.js const whiteList [/login, /register] router.beforeEach(async (to) { const token localStorage.getItem(token) const userStore useUserStore() if (!token) { if (whiteList.includes(to.path)) return true return { path: /login, query: { redirect: to.fullPath } } } if (token !userStore.userInfo) { try { await userStore.fetchUserInfo() } catch (error) { userStore.logout() return { path: /login } } } return true })Vue Router 4 的守卫支持直接 return 路由对象或布尔值不需要再调 next。这套代码的核心是防死循环跳 /login 时带 redirect 参数登录成功后再跳回原页面。fetchUserInfo 失败要清 token 再跳登录页否则 token 一直存在每次进入守卫都会再拉一次失败接口形成请求风暴。注意 fetchUserInfo 只拉一次用一个userInfoLoaded状态或者在 store 里判断 userInfo 是否有值避免同一页面内跳转重复请求。4.3 addRoute 注册动态菜单组件映射表和 404 注册顺序权限菜单的落地路径一般是登录成功 - 后端返回菜单树 - 前端遍历菜单树动态注册路由。这里最常见的坑是写() import(\/views/${item.component}.vue)字符串拼路径在 webpack 和 vite 里都无法静态分析要么打包产物异常要么直接报模块解析错误。// 组件映射表key 与后端返回的 component 字段对应 const componentMap { sys/index: () import(/views/sys/index.vue), order/list: () import(/views/order/list.vue), } const dynamicRoutes [] menu.forEach((item) { const route { path: item.path, name: item.name, component: componentMap[item.component], } dynamicRoutes.push(route) router.addRoute(route) }) // 404 兜底必须在动态路由注册之后 router.addRoute({ path: /:pathMatch(.*)*, name: NotFound, component: NotFound })addRoute 常见问题处理方式同名路由重复注册为每条动态路由带 name登出时 removeRoute(name)动态 import 字符串拼接用组件映射表key 由后端约定404 注册时机必须在 addRoute 之后否则会被 pathMatch 抢先匹配菜单刷新后重复注册登出时清理动态路由重新登录再注册退出登录时要把动态路由全部移除否则下个账号登录后菜单权限不同会出现路由重叠警告或访问到上一个账号的路由。动态路由注册顺序也直接影响 404 页面的出镜率先注册 404再注册动态路由pathMatch 兜底会拦截所有未匹配路由导致后续动态路由全部失效。5. 性能归因收尾懒加载、大屏适配和面板验证5.1 用懒加载和 scale 方案处理首屏与大屏vue 项目首屏变慢很大一部分来自路由全量打包。路由级懒加载是最快见效的手段component: () import(/views/user/index.vue)。注意按业务模块拆分而不是每个页面都拆否则拆出来的 chunk 又小又多请求数反而上涨。大屏项目里常见的适配方案是 transform: scale。基于 1920 x 1080 的设计稿做固定尺寸布局再把容器缩放铺满屏幕。这种方案比 postcss-px-to-viewport 更稳图表组件拿到的是整数尺寸不会因为表单缩放产生小数像素模糊。// utils/useScale.js export function useScreenScale(wrapper, screen, designWidth 1920, designHeight 1080) { const render () { const scaleX wrapper.clientWidth / designWidth const scaleY wrapper.clientHeight / designHeight screen.style.transform scale(${scaleX}, ${scaleY}) screen.style.transformOrigin left top } window.addEventListener(resize, render) render() }大屏适配插件和安全区、弹窗、全屏切换要单独处理弹窗如果用 fixed 定位会跑出缩放容器需要挂到 body 下的同层级节点。5.2 m3u8 播放卡顿从挂载时机和 Network 两级排查vue 播放 m3u8 这类流媒体卡顿多数不是播放器库的问题而是引入时机不对。浏览器支持 HLS 的前提下hls.js 这类库体积不小如果首屏就把播放器实例打进主包资源竞争会直接拖慢页面加载。排查步骤就两步先开 Network看 m3u8 的请求是不是在首屏阶段就发出再在 Performance 面板录制播放过程看主线程里 video 相关的任务有没有长阻塞。常见做法是import(hls.js)动态引入播放器页面滚动到视频区域或点击播放时才实例化。video 控制条样式自定义也是高频问题播放按钮居中、进度条皮肤统一用 CSS 变量和伪元素覆盖默认样式即可不需要引入额外 UI 库。5.3 用 Performance 面板打 debug对比优化前后性能优化没有数据对比就是玄学。我一般固定一个操作路径暗色模式下录制同样的操作对比 Network 瀑布图和主线程的长任务分布。Network 里看最长的等待发生在哪个阶段Performance 里看 task 的颜色深浅长任务标红的地方就是阻塞点。给关键接口和渲染节点打上计时标记是快速归因的手段// utils/timing.js export const timing (label) { const start performance.now() return () console.debug([timing] ${label}, performance.now() - start) }在列表页接口请求前调用const end timing(list-load)接口返回后执行end()就能在 Console 里看到耗时的精确差值。优化前后各打一轮日志和 Network 瀑布图对比哪个阶段变短了哪段代码有问题一目了然。本文还有配套的精品资源点击获取
