很多人在学vue3的时候都会陷入一种“看视频全会一写就废”的状态。尤其是到了某个阶段的章节比如“章节4”这种承上启下的时候前面学的ref、reactive还没彻底消化后面又要接组件通信、生命周期、自定义指令知识一下子全挤在一起特别容易乱。我自己带过不少新人也经历过从vue2硬切vue3的阵痛回头总结下来真正能帮你把知识钉在脑子里的不是反复刷视频而是“速学 复习”双线并进——先快速搭出骨架再用实战场景把细节填满。这篇内容就围绕vue3组合式API的核心用法、组件通信的进阶玩法、以及几类企业级项目里绕不开的实操场景展开适合正在学vue3、准备vue3面试、或者正在把老项目组件往vue3迁移的朋友先有个整体认知再对着细节反复练。1. 章节4到底该学什么速学与复习的两条主线1.1 “速学”定位先搭骨架再填肉我看了很多vue3相关的搜索热词发现大家最关心的其实不是某个API本身而是这个东西“能不能在我项目里跑起来”。环境搭建、scss配置、ts报错、后台管理系统模板、微前端方案……这些全部指向一个需求快速进入项目状态。所以“速学”绝对不是把文档从头翻到尾而是先建立一张最小知识地图。vue3章节4这个阶段通常意味着你已经掌握了setup、ref、reactive这些基础开始接触组件化开发的深层内容。这时候我建议把学习节奏调整为“以案例为中心”。比如你做一个后台管理系统里的用户列表就会同时用到组件props、事件emit、v-model表单绑定、以及列表页的搜索条件保留这一串知识点直接被一个页面串起来了。比你单独学“props是什么”要牢固得多。我个人的“速学”方法论是每个知识点只花20%时间看理论剩下80%时间拿来改代码。看完一个API立刻做两件事第一把这个API放到一个最小可运行demo里第二想一个它替代vue2旧写法的场景。比如学了computed就马上想“我在vue2里用watch实现的搜索过滤改用computed怎么写”。这种新旧对照的迁移学法对老手和新手都好用。1.2 “复习”定位用面试题反推知识点再看看那些热搜词里的vue3面试题其实透露出一个信号与其临到面试前疯狂背题不如在日常学习里就按面试官的角度去看知识点。章节4的内容恰恰是vue3面试里出题最密集的区域。拿computed举例面试官几乎必问三个问题computed和watch的区别是什么computed为什么有缓存computed可以修改吗这些问题看着基础但你真要在项目里说清楚就得理解响应式依赖收集的原理。再比如组件通信面试官会问“你有几种方式实现父子通信”“provide/inject适合什么场景”这些问题你要是在章节4阶段就逐个动手写过根本不用背。我自己复习的方法是建立一张“面试考点对照表”把章节涉及的知识点列出来每个知识点旁边写上“如果我是面试官我会怎么问”“我做过什么项目场景能证明我会”。比如vue3用jsx我就不光知道vite里能配还知道在什么情况下jsx比template更灵活。这张表每周末更新一次复习的时候只看表不翻书。到了真正面试的时候你讲的每一个点都是你自己的实战不是背出来的。2. 响应式核心ref、reactive与computed的底层逻辑和面试考点2.1 ref和reactive怎么选从源码设计到使用场景很多人纠结ref和reactive到底用哪个其实你只要理解了它们的设计目标就豁然开朗了。reactive是基于Proxy的深层响应式适合存对象ref呢本质上是一个把value包了一层响应式引用的容器它内部其实也是调用了reactive来处理对象类型的值。所以ref能存基本类型也能存对象而reactive只能存对象。这里有个很容易踩的坑用reactive存基本类型数据比如reactive(hello)你会发现数据根本不响应因为它只能处理对象。但用ref存数组比如const list ref([])然后list.value.push(item)这是完全没问题的因为ref内部会把数组转成reactive的proxy对象。不过要注意如果你在模板里直接遍历list模板会帮你自动解包写成v-foritem in list就好不用加.value。我在实际项目里的选型原则很简单业务里的表单对象、接口返回的复杂结构统一用reactive单个基本类型值、需要被函数传递的共享状态统一用ref。这样团队成员看代码不会精神分裂。另外还有一个细节ref在模板里自动解包只适用于顶层属性如果你写成formRef.value.name这种嵌套方式模板里不会自动解包必须写.value。这个坑我在表单校验场景里踩过好几次。2.2 computed的缓存机制与多层级依赖处理computed在vue3里最大的特点就是惰性缓存只有它依赖的响应式数据发生变化时它才会重新计算否则会一直返回上一次的结果。这个机制非常适合做搜索过滤、筛选后的列表展示这类场景。比如你有一个几千条数据的列表每敲一个字都要重新filter一遍如果用methods模板每次渲染都会执行用computed只有输入框绑定的那个响应式值变了才会重新计算性能差距立竿见影。但computed的缓存有个前提依赖必须是响应式的。我之前遇到过一个问题在computed里去读一个普通变量那个变量在onMounted里被修改了结果computed根本不更新。排查了半天发现那个变量根本没用ref或reactive包裹于是computed压根不认为它有依赖。所以记住一句话computed里读的数据必须是响应式的。还有一个多层依赖的场景computed里依赖了另一个computed比如过滤列表依赖关键词总价依赖单价和数量。这种情况下vue3会建立完整的依赖链任何一个源头变化整条链都会重新计算。但要注意避免在computed里修改依赖的数据比如在computed里push数组这样会导致死循环。如果你想修改过滤后的结果应该返回一个新数组比如return list.value.filter(item item.visible)。在面试里如果被问到“computed能不能写异步”答案是“不建议”。因为computed是同步的异步逻辑会让它返回一个pending状态导致渲染得不到预期值。这种情况你应该用watch加一个loading状态或者用vueuse的asyncComputed。搞清楚computed的能力边界比你背十道面试题都管用。3. 组件通信全解从props/emit到v-model和provide/inject3.1 常规通信的边界问题组件通信是章节4的重头戏也是后台管理系统这类项目里用得最多的技术点。先说最常规的父子通信props往下传数据emit往上抛事件。这个没什么好讲的真正有讲究的是“props不要直接改要用emit”这条规矩。vue3里的props是只读的你子组件里改了父组件传进来的对象框架不报错但会在控制台警告而且父组件重新渲染时子组件的数据会被覆盖回来造成“改了跟没改一样”的诡异bug。我处理这类问题习惯用一个折中的方案如果props传进来的是对象子组件要用它做局部的编辑操作我会先拷贝一份再处理。比如用户信息对象传进来表单里要改我会const localForm reactive({ ...props.userInfo })复用它的字段但不动原对象。如果要回传父组件就emit一个update:user-info事件让父组件用新对象替换旧的。这样单向数据流才不会被破坏。3.2 v-model进阶自定义组件的双向绑定vue3里v-model的写法有了变化这也是很多人从vue2迁移过来容易懵的点。在vue2里组件上的v-model默认监听的是input事件而vue3里改成了update:modelValue对应prop是modelValue。如果你在vue3里继续用vue2的写法组件上绑定的事件永远触发不了。这里我share一个我实际封装搜索框组件的代码可以看得比较直观!-- SearchInput.vue -- script setup defineProps({ modelValue: { type: String, default: } }) const emit defineEmits([update:modelValue]) function handleInput(e) { emit(update:modelValue, e.target.value) } /script template input :valuemodelValue inputhandleInput placeholder请输入关键词 / /template父组件里直接SearchInput v-modelkeyword /双向绑定就通了。如果你想绑定多个值还可以给v-model加参数比如v-model:user-nameuserName在子组件里对应props就是userNameemit的事件就是update:user-name。一个组件可以同时支持多个v-model比如一个筛选组件里同时控制关键词和排序字段这招非常实用。3.3 provide/inject解决跨层通信组件嵌套层级深了以后props一层层往下传实在痛苦比如页面结构是“页面组件 → 布局组件 → 侧边栏组件 → 菜单组件”每层都要透传一堆参数。vue3里provide和inject就是干这个的在顶层组件用provide提供数据底层的任何子组件里都可以用inject把它拿过来用。但provide/inject有个需要特别注意的问题它默认不是响应式的。如果你在provide里传了一个普通变量底层组件拿到的就是那个时刻的值后续变化不会同步。解决办法是提供一个ref或reactive对象。比如提供一个refprovide(userInfo, userInfoRef)如果你还希望子组件可以改父组件的数据就在provide里同时提供修改方法保持单向数据流的规范provide(userInfo, { userInfo: userInfoRef, updateUserName: (name) { userInfoRef.value.name name } })子组件inject的时候可以直接解构但要注意别在子组件里直接调用父组件的修改方法去写业务逻辑修改逻辑应该自己封装好再provide出去。我见过不少项目把provide/inject当成全局变量的替代品最后维护起来成本特别高等于是把全局变量的臭味引进了组件树。4. 自定义指令与组合式函数把业务沉淀成资产4.1 自定义指令实现clickOutside关闭下拉写后台管理系统的人肯定都遇到过这个需求点击下拉框外部区域自动关闭下拉面板。如果用第三方组件库一般都有现成的props但如果你用的是原生select或自定义弹层这个逻辑就得自己写。我建议用自定义指令来封装一句指令就能全局复用。先看完整实现再解释原理// directives/clickOutside.js const clickOutside { mounted(el, binding) { el.__clickOutsideHandler__ (event) { if (!el.contains(event.target) binding.value typeof binding.value function) { binding.value(event) } } document.addEventListener(click, el.__clickOutsideHandler__) }, unmounted(el) { document.removeEventListener(click, el.__clickOutsideHandler__) delete el.__clickOutsideHandler__ } } export default clickOutside用法就是在科技组件上挂指令比如下拉面板的根节点template div v-click-outsidecloseDropdown button clickisOpen true打开下拉/button div v-showisOpen classdropdown选项内容/div /div /template这个指令的妙处在于事件监听器绑定在document上然后判断点击目标是否在元素内部。如果在外部就触发你传入的函数。必须留意的是指令卸载时一定要移除事件监听器不然组件销毁后监听器还在document上挂载轻则内存泄漏重则会触发已经不存在的组件里的函数导致报错。4.2 组合式函数封装倒计时与列表请求组合式函数是vue3最有价值的语法糖之一它把你以前写在mixin里的逻辑拆成一个个没有模板、纯逻辑的独立函数真正做到一处封装多组件复用。我自己最常用的一个场景是倒计时比如发送验证码按钮。来看核心代码// core/useCountdown.js import { ref, onUnmounted } from vue export function useCountdown(initialSeconds 60) { const countdown ref(0) let timer null const start (seconds initialSeconds) { countdown.value seconds if (timer) clearInterval(timer) timer setInterval(() { countdown.value-- if (countdown.value 0) { clearInterval(timer) timer null } }, 1000) } const isCounting () countdown.value 0 onUnmounted(() { if (timer) clearInterval(timer) }) return { countdown, start, isCounting } }按钮组件里直接const { countdown, start, isCounting } useCountdown(60)这个封装好的点在于定时器在组件卸载时自动清理不会因为页面跳转还继续跑。类似的思路可以套在很多场景上比如列表请求的loading管理、表单校验、权限判断。你可以把接口请求、loading状态、错误处理全封装到一个useFetchList函数里每个页面只要传一个api方法就能获得完整的数据列表。这才是组合式API的正确打开方式——不是把代码挪个地方而是把可复用的逻辑彻底抽离。5. 动态表单、拖拽排序等企业级场景实操5.1 动态增删表单行的双向绑定陷阱动态添加删除表单行这在vue3商城后台、订单编辑页里太常见了。需求很简单一个表格每行有几个输入框点添加按钮加一行点删除按钮删掉一行。但如果你直接把行数据用reactive数组存再用v-model绑定到每行输入框上看起来挺爽一操作就出问题。最典型的问题是删除中间某一行后后面行的数据错位了。这个问题的根源通常是你用了index作为行的key而index是不可靠的删除一行后index全部重排导致vue的虚拟DOM复用错误。正确做法是每行加一个唯一id比如用Date.now() Math.random()生成删除和渲染都用id定位。还有一层更深的问题如果你把每行定义成reactive(obj)再放进数组删除后虽然数组长度变了但子行对象的响应式引用可能存在残留。所以我更建议整个动态表单行用一个ref([])给数组的整体重新赋值而不是push单行。比如删除一行时function removeRow(rowId) { list.value list.value.filter(row row.id ! rowId) } function addRow() { list.value.push({ id: ${Date.now()}_${Math.random()}, name: , price: 0, }) }注意我用了list.value ...整体赋值这样响应式更新最干净不会出现“界面没更新但数据变了”这种灵异事件。动态表单的核心就一句话数据永远通过整体替换来驱动渲染而不要依赖多个零散的mutation。5.2 vuedraggable/sortable的未生效排查拖拽排序这个需求很多后台管理系统里都会用到。但现在网上搜vue3拖拽最常见的问题就是“vuedraggable/sortable未生效”。我排查过很多次最后发现90%的情况不是插件坏了而是用错了版本或者没做样式处理。vuedraggable的vue3版本用vuedraggablenext安装如果你装的是旧版组件渲染都渲染不出来。另外一个容易被忽略的点拖拽列表里的每一项必须在key上使用唯一标识不能只用index因为拖拽的本质就是不断改变数组顺序如果key不稳定拖拽过程中Vue的diff会错乱表现就是拖起来没反应或者拖完位置又弹回去。还有样式问题拖拽的时候要看到“被拖着的元素跟随鼠标”默认情况下需要给元素加一点基础样式最省事的是引入element-plus的样式或者自己写一点.sortable-item { cursor: move; user-select: none; }如果你用的是原生sortable.js还需要在v-model绑定的数组被修改后手动触发响应式更新因为原生库改的是dom位置不一定触发vue的响应式。经验之谈拖拽排序组件优先选择跟vue3深度集成的vuedraggable如果遇到“拖拽能拖但数据不更新”十有八九是没监听它的change或input事件记得在事件回调里同步你的列表数组。5.3 组件库on-success监听不到的真实原因很多人用组件库里的上传组件比如element-plus的el-upload写on-success事件回调来处理上传成功后的逻辑结果发现事件一直不触发。这里有个隐蔽的坑在于on-success是组件的事件不是HTML原生事件。你在模板里写成successhandleSuccess如果组件内部压根没有声明这个emit那么这个事件就会落到原生DOM上自然永远不会触发。排查步骤分三步。第一确认你用的组件库版本和你项目里引入的组件版本一致有时候局部注册的组件覆盖了全局的导致事件名对不上。第二查看组件库文档确认事件名是on-success还是successelement-plus里两者有微妙区别success对应的是自定义emiton-success是透传给内部原生的props。第三如果你想监听上传成功后拿到的响应数据优先在http-request这个钩子里处理手动发请求拿响应再自己把结果放回组件的fileList绕开事件参数传递的兼容问题。我自己写了一个上传组件之后稳定方案是这样的自定义http-request内部用axios上传拿到结果后emit一个自定义事件给父组件父组件只要监听这个自定义事件就行完全不受组件库版本迭代影响。对于“监听不到事件”类问题最好的方法是减少中间层直接在源头把逻辑做干净。6. 高频报错与排查速查表从开发到面试都能用6.1 登录不跳转路由与pinia状态不同步登录不跳转这可能是vue3项目里最常见、也是最容易排查的bug。先别急着看路由代码先打开console看报错。我遇到过的绝大多数情况是登录成功后已经拿到了token也存进了pinia或localStorage但router.push之后页面还在登录页。翻半天发现问题是路由守卫里永远有一个人挡在中间。来看经典问题代码router.beforeEach((to, from, next) { const token useUserStore().token if (!token to.path ! /login) { next(/login) } else { next() } })这个写法如果useUserStore()是直接在路由文件顶部用的那么可能会存在两个store实例。因为pinia的store必须在pinia实例创建之后调用你在路由模块顶层调用时如果pinia还没初始化store内部拿到的就是一个空的实例token永远是初始值。解决办法有两个第一在路由守卫函数内部再调用useUserStore()第二确保pinia在main.js里先于router安装。如果排查完发现store没问题那就要看路由meta配置。很多管理系统在路由meta里加了权限字段比如requiresAuth: true如果你的守卫判断逻辑写的是“没有meta就放行”那所有有meta的路由都会被拦截自然跳转不过去。这个排查顺序我建议固定下来先看console再看store实例再看路由meta最后看路由注册顺序。6.2 购物车数量边界控制购物车数量不能小于0也不能超过库存这个需求看似简单但实现起来也有坑。如果你直接在输入框上绑定number然后写if (value 0) value 0你会发现输入框仍然能显示负数因为v-model绑定的数据虽然在逻辑上被改了但输入框的值不一定同步。我推荐的写法是用computed做双层保护const cartData ref([ { id: 1, count: 2, stock: 10 }, { id: 2, count: 0, stock: 5 } ]) function changeCount(item, delta) { const newCount item.count delta item.count Math.min(Math.max(newCount, 0), item.stock) }同时输入框上加change事件如果用户手输了一个超范围的值直接重置input :valueitem.count changeitem.count Math.min(Math.max(Number($event.target.value), 0), item.stock) /这里要小心的是Number()会得到0用户把输入框清空时可能会被静默改成0体验很怪。更细的做法是用$event.target.value.trim() 时直接置0但这对用户不太友好。这类边界问题没有标准答案核心是你要想清楚“数据合法性的判断时机”和“输入框值的同步策略”。我一般会在提交到购物车前再加一次校验输入框层面允许临时出现0但提交时不允许存在空值或负数。6.3 环境搭建与ts报错等琐碎问题vue3环境搭建一直是搜索热词我理解大家的痛点明明照着官网敲怎么就报错了以vite为例新建项目用npm create vitelatest但如果你在node 14的版本下跑vite 5大概率直接报错。所以环境搭建的第一步永远是检查版本node的版本、npm的版本、vite的版本、vue的版本四者要匹配。node 16以下建议用vite 3node 18以上可以用vite 5这是我实际踩过坑总结出来的经验。再说ts报错很多人在vue3项目里遇到“找不到模块‘./App.vue’”这类报错其实是ts不认识.vue文件。解决方案是在项目根目录建一个env.d.ts/// reference typesvite/client / declare module *.vue { import type { DefineComponent } from vue const component: DefineComponent{}, {}, any export default component }这类问题的排查思路是先确认报错来自ts还是构建工具再看是类型声明缺失还是路径错误。不要遇到报错就去改tsconfig.json的strict大概率越改越乱。还有scss配置vite项目里想用scss不是npm i sass就完事需要在vite.config里配置css.preprocessorOptions.scss.additionalData才能全局注入变量。这些小坑每一个都能卡住人半小时但知道一次之后以后就是肌肉记忆了。6.4 高频问题速查表问题现象排查思路兜底方案登录成功不跳转检查路由守卫的store实例、meta字段先确保pinia实例初始化再在守卫内部获取store组件on-success不触发确认组件版本、事件名、emit声明用http-request自定义请求绕开组件事件拖拽排序失效检查版本、key值、事件绑定改用vuedraggablenext确保监听change事件输入框允许负数v-model绑定数据未同步用Math.min/max夹紧再加change兜底vite项目本地打不开局域网检查host配置、防火墙vite.config里server.host: true路由页面刷新404nginx配置history路由回退配置try_files$uri $uri/ /index.html表单校验不生效检查校验属性名、prop绑定确保校验rule的prop和表单字段一致pdf预览白屏检查pdfjs版本、跨域头用iframe指向后端预览接口中转表里这些基本都是我在真实项目里反复遇到的。有一个共同的排查习惯永远先确定是“代码问题”还是“环境问题”。代码问题看console和报错堆栈环境问题看版本和配置。花五分钟确定问题的类别往往比埋头改二十分钟代码高效得多。7. 章节4复习路线图与实际项目里的扩展玩法7.1 一条可以照抄的复习路线如果你正处在“章节4学完了但感觉没学会”的阶段我建议你花一个周末按下面的顺序把知识重新过一遍第一天上午用组合式API重新写一个待办列表强制自己使用ref、reactive、computed、watch不碰任何组件库第一天下午把待办列表拆成三个组件输入组件、列表组件、筛选组件用props/emit/v-model把通信跑通第二天上午给列表加一个自定义指令用来自动聚焦新增输入框再封装一个useTodoList的组合式函数把所有逻辑抽出去第二天下午加一个拖拽排序功能再解决“拖拽后数据不更新”的问题。这四条任务分别对应了响应式、组件通信、自定义指令、组合式函数正好是章节4的四大核心。做完这一轮你对知识点的理解会完全不一样。复习的关键不是重复阅读而是重复练习而且要刻意给自己制造难度。7.2 进阶扩展jsx、微前端与后台模板如果你已经做完基础的复习还觉得有余力我推荐往几个方向扩展。第一个是jsxvite里支持jsx只需要安装vitejs/plugin-vue-jsx然后你就可以在vue组件里写jsx好处是动态渲染逻辑更灵活坏处是模板的可读性下降但理解jsx对看源码特别有帮助。第二个是微前端vue3 vite做微前端方案现在比较成熟了主应用用qiankun或micro-app都能接子应用用vite构建时需要注意跨域和样式隔离这个领域属于加分项拿出去讲很有分量。第三个是后台管理系统模板很多人问“vue3 admin最精简的框架”其实与其下载一个全家桶再删不如自己从零搭一个把路由、pinia、axios、权限控制、动态菜单一步步加进去这也是最好的章节4综合练习。7.3 把章节4当成一块跳板章节4承载的内容说穿了就是把“会用vue3”升级成“能组织vue3项目”。你学完这些之后回头看之前写的代码会发现自己能做出更合理的组件划分、更清晰的状态管理、更易维护的逻辑复用。很多人会问要不要等把vue3全部学完再找工作、再上手项目我的建议是别等在章节4这个阶段就可以试着用组合式API去重构一个老项目里的页面了。学vue3的最好方式就是拿真实业务下手报错了就查查不到就换一种实现方式几次下来项目里全是你的经验。最后再分享一个小技巧把你项目里每一个“解决完就忘了”的问题整理成一个专门的markdown文件文件名叫“坑.md”每周翻一遍。你会发现下一周你同事遇到的问题八成在上面已经写过答案了。这套方法我用了很多年不止适用于vue3学任何技术栈都顺手。
Vue3组合式API核心与实战：从响应式到组件通信
很多人在学vue3的时候都会陷入一种“看视频全会一写就废”的状态。尤其是到了某个阶段的章节比如“章节4”这种承上启下的时候前面学的ref、reactive还没彻底消化后面又要接组件通信、生命周期、自定义指令知识一下子全挤在一起特别容易乱。我自己带过不少新人也经历过从vue2硬切vue3的阵痛回头总结下来真正能帮你把知识钉在脑子里的不是反复刷视频而是“速学 复习”双线并进——先快速搭出骨架再用实战场景把细节填满。这篇内容就围绕vue3组合式API的核心用法、组件通信的进阶玩法、以及几类企业级项目里绕不开的实操场景展开适合正在学vue3、准备vue3面试、或者正在把老项目组件往vue3迁移的朋友先有个整体认知再对着细节反复练。1. 章节4到底该学什么速学与复习的两条主线1.1 “速学”定位先搭骨架再填肉我看了很多vue3相关的搜索热词发现大家最关心的其实不是某个API本身而是这个东西“能不能在我项目里跑起来”。环境搭建、scss配置、ts报错、后台管理系统模板、微前端方案……这些全部指向一个需求快速进入项目状态。所以“速学”绝对不是把文档从头翻到尾而是先建立一张最小知识地图。vue3章节4这个阶段通常意味着你已经掌握了setup、ref、reactive这些基础开始接触组件化开发的深层内容。这时候我建议把学习节奏调整为“以案例为中心”。比如你做一个后台管理系统里的用户列表就会同时用到组件props、事件emit、v-model表单绑定、以及列表页的搜索条件保留这一串知识点直接被一个页面串起来了。比你单独学“props是什么”要牢固得多。我个人的“速学”方法论是每个知识点只花20%时间看理论剩下80%时间拿来改代码。看完一个API立刻做两件事第一把这个API放到一个最小可运行demo里第二想一个它替代vue2旧写法的场景。比如学了computed就马上想“我在vue2里用watch实现的搜索过滤改用computed怎么写”。这种新旧对照的迁移学法对老手和新手都好用。1.2 “复习”定位用面试题反推知识点再看看那些热搜词里的vue3面试题其实透露出一个信号与其临到面试前疯狂背题不如在日常学习里就按面试官的角度去看知识点。章节4的内容恰恰是vue3面试里出题最密集的区域。拿computed举例面试官几乎必问三个问题computed和watch的区别是什么computed为什么有缓存computed可以修改吗这些问题看着基础但你真要在项目里说清楚就得理解响应式依赖收集的原理。再比如组件通信面试官会问“你有几种方式实现父子通信”“provide/inject适合什么场景”这些问题你要是在章节4阶段就逐个动手写过根本不用背。我自己复习的方法是建立一张“面试考点对照表”把章节涉及的知识点列出来每个知识点旁边写上“如果我是面试官我会怎么问”“我做过什么项目场景能证明我会”。比如vue3用jsx我就不光知道vite里能配还知道在什么情况下jsx比template更灵活。这张表每周末更新一次复习的时候只看表不翻书。到了真正面试的时候你讲的每一个点都是你自己的实战不是背出来的。2. 响应式核心ref、reactive与computed的底层逻辑和面试考点2.1 ref和reactive怎么选从源码设计到使用场景很多人纠结ref和reactive到底用哪个其实你只要理解了它们的设计目标就豁然开朗了。reactive是基于Proxy的深层响应式适合存对象ref呢本质上是一个把value包了一层响应式引用的容器它内部其实也是调用了reactive来处理对象类型的值。所以ref能存基本类型也能存对象而reactive只能存对象。这里有个很容易踩的坑用reactive存基本类型数据比如reactive(hello)你会发现数据根本不响应因为它只能处理对象。但用ref存数组比如const list ref([])然后list.value.push(item)这是完全没问题的因为ref内部会把数组转成reactive的proxy对象。不过要注意如果你在模板里直接遍历list模板会帮你自动解包写成v-foritem in list就好不用加.value。我在实际项目里的选型原则很简单业务里的表单对象、接口返回的复杂结构统一用reactive单个基本类型值、需要被函数传递的共享状态统一用ref。这样团队成员看代码不会精神分裂。另外还有一个细节ref在模板里自动解包只适用于顶层属性如果你写成formRef.value.name这种嵌套方式模板里不会自动解包必须写.value。这个坑我在表单校验场景里踩过好几次。2.2 computed的缓存机制与多层级依赖处理computed在vue3里最大的特点就是惰性缓存只有它依赖的响应式数据发生变化时它才会重新计算否则会一直返回上一次的结果。这个机制非常适合做搜索过滤、筛选后的列表展示这类场景。比如你有一个几千条数据的列表每敲一个字都要重新filter一遍如果用methods模板每次渲染都会执行用computed只有输入框绑定的那个响应式值变了才会重新计算性能差距立竿见影。但computed的缓存有个前提依赖必须是响应式的。我之前遇到过一个问题在computed里去读一个普通变量那个变量在onMounted里被修改了结果computed根本不更新。排查了半天发现那个变量根本没用ref或reactive包裹于是computed压根不认为它有依赖。所以记住一句话computed里读的数据必须是响应式的。还有一个多层依赖的场景computed里依赖了另一个computed比如过滤列表依赖关键词总价依赖单价和数量。这种情况下vue3会建立完整的依赖链任何一个源头变化整条链都会重新计算。但要注意避免在computed里修改依赖的数据比如在computed里push数组这样会导致死循环。如果你想修改过滤后的结果应该返回一个新数组比如return list.value.filter(item item.visible)。在面试里如果被问到“computed能不能写异步”答案是“不建议”。因为computed是同步的异步逻辑会让它返回一个pending状态导致渲染得不到预期值。这种情况你应该用watch加一个loading状态或者用vueuse的asyncComputed。搞清楚computed的能力边界比你背十道面试题都管用。3. 组件通信全解从props/emit到v-model和provide/inject3.1 常规通信的边界问题组件通信是章节4的重头戏也是后台管理系统这类项目里用得最多的技术点。先说最常规的父子通信props往下传数据emit往上抛事件。这个没什么好讲的真正有讲究的是“props不要直接改要用emit”这条规矩。vue3里的props是只读的你子组件里改了父组件传进来的对象框架不报错但会在控制台警告而且父组件重新渲染时子组件的数据会被覆盖回来造成“改了跟没改一样”的诡异bug。我处理这类问题习惯用一个折中的方案如果props传进来的是对象子组件要用它做局部的编辑操作我会先拷贝一份再处理。比如用户信息对象传进来表单里要改我会const localForm reactive({ ...props.userInfo })复用它的字段但不动原对象。如果要回传父组件就emit一个update:user-info事件让父组件用新对象替换旧的。这样单向数据流才不会被破坏。3.2 v-model进阶自定义组件的双向绑定vue3里v-model的写法有了变化这也是很多人从vue2迁移过来容易懵的点。在vue2里组件上的v-model默认监听的是input事件而vue3里改成了update:modelValue对应prop是modelValue。如果你在vue3里继续用vue2的写法组件上绑定的事件永远触发不了。这里我share一个我实际封装搜索框组件的代码可以看得比较直观!-- SearchInput.vue -- script setup defineProps({ modelValue: { type: String, default: } }) const emit defineEmits([update:modelValue]) function handleInput(e) { emit(update:modelValue, e.target.value) } /script template input :valuemodelValue inputhandleInput placeholder请输入关键词 / /template父组件里直接SearchInput v-modelkeyword /双向绑定就通了。如果你想绑定多个值还可以给v-model加参数比如v-model:user-nameuserName在子组件里对应props就是userNameemit的事件就是update:user-name。一个组件可以同时支持多个v-model比如一个筛选组件里同时控制关键词和排序字段这招非常实用。3.3 provide/inject解决跨层通信组件嵌套层级深了以后props一层层往下传实在痛苦比如页面结构是“页面组件 → 布局组件 → 侧边栏组件 → 菜单组件”每层都要透传一堆参数。vue3里provide和inject就是干这个的在顶层组件用provide提供数据底层的任何子组件里都可以用inject把它拿过来用。但provide/inject有个需要特别注意的问题它默认不是响应式的。如果你在provide里传了一个普通变量底层组件拿到的就是那个时刻的值后续变化不会同步。解决办法是提供一个ref或reactive对象。比如提供一个refprovide(userInfo, userInfoRef)如果你还希望子组件可以改父组件的数据就在provide里同时提供修改方法保持单向数据流的规范provide(userInfo, { userInfo: userInfoRef, updateUserName: (name) { userInfoRef.value.name name } })子组件inject的时候可以直接解构但要注意别在子组件里直接调用父组件的修改方法去写业务逻辑修改逻辑应该自己封装好再provide出去。我见过不少项目把provide/inject当成全局变量的替代品最后维护起来成本特别高等于是把全局变量的臭味引进了组件树。4. 自定义指令与组合式函数把业务沉淀成资产4.1 自定义指令实现clickOutside关闭下拉写后台管理系统的人肯定都遇到过这个需求点击下拉框外部区域自动关闭下拉面板。如果用第三方组件库一般都有现成的props但如果你用的是原生select或自定义弹层这个逻辑就得自己写。我建议用自定义指令来封装一句指令就能全局复用。先看完整实现再解释原理// directives/clickOutside.js const clickOutside { mounted(el, binding) { el.__clickOutsideHandler__ (event) { if (!el.contains(event.target) binding.value typeof binding.value function) { binding.value(event) } } document.addEventListener(click, el.__clickOutsideHandler__) }, unmounted(el) { document.removeEventListener(click, el.__clickOutsideHandler__) delete el.__clickOutsideHandler__ } } export default clickOutside用法就是在科技组件上挂指令比如下拉面板的根节点template div v-click-outsidecloseDropdown button clickisOpen true打开下拉/button div v-showisOpen classdropdown选项内容/div /div /template这个指令的妙处在于事件监听器绑定在document上然后判断点击目标是否在元素内部。如果在外部就触发你传入的函数。必须留意的是指令卸载时一定要移除事件监听器不然组件销毁后监听器还在document上挂载轻则内存泄漏重则会触发已经不存在的组件里的函数导致报错。4.2 组合式函数封装倒计时与列表请求组合式函数是vue3最有价值的语法糖之一它把你以前写在mixin里的逻辑拆成一个个没有模板、纯逻辑的独立函数真正做到一处封装多组件复用。我自己最常用的一个场景是倒计时比如发送验证码按钮。来看核心代码// core/useCountdown.js import { ref, onUnmounted } from vue export function useCountdown(initialSeconds 60) { const countdown ref(0) let timer null const start (seconds initialSeconds) { countdown.value seconds if (timer) clearInterval(timer) timer setInterval(() { countdown.value-- if (countdown.value 0) { clearInterval(timer) timer null } }, 1000) } const isCounting () countdown.value 0 onUnmounted(() { if (timer) clearInterval(timer) }) return { countdown, start, isCounting } }按钮组件里直接const { countdown, start, isCounting } useCountdown(60)这个封装好的点在于定时器在组件卸载时自动清理不会因为页面跳转还继续跑。类似的思路可以套在很多场景上比如列表请求的loading管理、表单校验、权限判断。你可以把接口请求、loading状态、错误处理全封装到一个useFetchList函数里每个页面只要传一个api方法就能获得完整的数据列表。这才是组合式API的正确打开方式——不是把代码挪个地方而是把可复用的逻辑彻底抽离。5. 动态表单、拖拽排序等企业级场景实操5.1 动态增删表单行的双向绑定陷阱动态添加删除表单行这在vue3商城后台、订单编辑页里太常见了。需求很简单一个表格每行有几个输入框点添加按钮加一行点删除按钮删掉一行。但如果你直接把行数据用reactive数组存再用v-model绑定到每行输入框上看起来挺爽一操作就出问题。最典型的问题是删除中间某一行后后面行的数据错位了。这个问题的根源通常是你用了index作为行的key而index是不可靠的删除一行后index全部重排导致vue的虚拟DOM复用错误。正确做法是每行加一个唯一id比如用Date.now() Math.random()生成删除和渲染都用id定位。还有一层更深的问题如果你把每行定义成reactive(obj)再放进数组删除后虽然数组长度变了但子行对象的响应式引用可能存在残留。所以我更建议整个动态表单行用一个ref([])给数组的整体重新赋值而不是push单行。比如删除一行时function removeRow(rowId) { list.value list.value.filter(row row.id ! rowId) } function addRow() { list.value.push({ id: ${Date.now()}_${Math.random()}, name: , price: 0, }) }注意我用了list.value ...整体赋值这样响应式更新最干净不会出现“界面没更新但数据变了”这种灵异事件。动态表单的核心就一句话数据永远通过整体替换来驱动渲染而不要依赖多个零散的mutation。5.2 vuedraggable/sortable的未生效排查拖拽排序这个需求很多后台管理系统里都会用到。但现在网上搜vue3拖拽最常见的问题就是“vuedraggable/sortable未生效”。我排查过很多次最后发现90%的情况不是插件坏了而是用错了版本或者没做样式处理。vuedraggable的vue3版本用vuedraggablenext安装如果你装的是旧版组件渲染都渲染不出来。另外一个容易被忽略的点拖拽列表里的每一项必须在key上使用唯一标识不能只用index因为拖拽的本质就是不断改变数组顺序如果key不稳定拖拽过程中Vue的diff会错乱表现就是拖起来没反应或者拖完位置又弹回去。还有样式问题拖拽的时候要看到“被拖着的元素跟随鼠标”默认情况下需要给元素加一点基础样式最省事的是引入element-plus的样式或者自己写一点.sortable-item { cursor: move; user-select: none; }如果你用的是原生sortable.js还需要在v-model绑定的数组被修改后手动触发响应式更新因为原生库改的是dom位置不一定触发vue的响应式。经验之谈拖拽排序组件优先选择跟vue3深度集成的vuedraggable如果遇到“拖拽能拖但数据不更新”十有八九是没监听它的change或input事件记得在事件回调里同步你的列表数组。5.3 组件库on-success监听不到的真实原因很多人用组件库里的上传组件比如element-plus的el-upload写on-success事件回调来处理上传成功后的逻辑结果发现事件一直不触发。这里有个隐蔽的坑在于on-success是组件的事件不是HTML原生事件。你在模板里写成successhandleSuccess如果组件内部压根没有声明这个emit那么这个事件就会落到原生DOM上自然永远不会触发。排查步骤分三步。第一确认你用的组件库版本和你项目里引入的组件版本一致有时候局部注册的组件覆盖了全局的导致事件名对不上。第二查看组件库文档确认事件名是on-success还是successelement-plus里两者有微妙区别success对应的是自定义emiton-success是透传给内部原生的props。第三如果你想监听上传成功后拿到的响应数据优先在http-request这个钩子里处理手动发请求拿响应再自己把结果放回组件的fileList绕开事件参数传递的兼容问题。我自己写了一个上传组件之后稳定方案是这样的自定义http-request内部用axios上传拿到结果后emit一个自定义事件给父组件父组件只要监听这个自定义事件就行完全不受组件库版本迭代影响。对于“监听不到事件”类问题最好的方法是减少中间层直接在源头把逻辑做干净。6. 高频报错与排查速查表从开发到面试都能用6.1 登录不跳转路由与pinia状态不同步登录不跳转这可能是vue3项目里最常见、也是最容易排查的bug。先别急着看路由代码先打开console看报错。我遇到过的绝大多数情况是登录成功后已经拿到了token也存进了pinia或localStorage但router.push之后页面还在登录页。翻半天发现问题是路由守卫里永远有一个人挡在中间。来看经典问题代码router.beforeEach((to, from, next) { const token useUserStore().token if (!token to.path ! /login) { next(/login) } else { next() } })这个写法如果useUserStore()是直接在路由文件顶部用的那么可能会存在两个store实例。因为pinia的store必须在pinia实例创建之后调用你在路由模块顶层调用时如果pinia还没初始化store内部拿到的就是一个空的实例token永远是初始值。解决办法有两个第一在路由守卫函数内部再调用useUserStore()第二确保pinia在main.js里先于router安装。如果排查完发现store没问题那就要看路由meta配置。很多管理系统在路由meta里加了权限字段比如requiresAuth: true如果你的守卫判断逻辑写的是“没有meta就放行”那所有有meta的路由都会被拦截自然跳转不过去。这个排查顺序我建议固定下来先看console再看store实例再看路由meta最后看路由注册顺序。6.2 购物车数量边界控制购物车数量不能小于0也不能超过库存这个需求看似简单但实现起来也有坑。如果你直接在输入框上绑定number然后写if (value 0) value 0你会发现输入框仍然能显示负数因为v-model绑定的数据虽然在逻辑上被改了但输入框的值不一定同步。我推荐的写法是用computed做双层保护const cartData ref([ { id: 1, count: 2, stock: 10 }, { id: 2, count: 0, stock: 5 } ]) function changeCount(item, delta) { const newCount item.count delta item.count Math.min(Math.max(newCount, 0), item.stock) }同时输入框上加change事件如果用户手输了一个超范围的值直接重置input :valueitem.count changeitem.count Math.min(Math.max(Number($event.target.value), 0), item.stock) /这里要小心的是Number()会得到0用户把输入框清空时可能会被静默改成0体验很怪。更细的做法是用$event.target.value.trim() 时直接置0但这对用户不太友好。这类边界问题没有标准答案核心是你要想清楚“数据合法性的判断时机”和“输入框值的同步策略”。我一般会在提交到购物车前再加一次校验输入框层面允许临时出现0但提交时不允许存在空值或负数。6.3 环境搭建与ts报错等琐碎问题vue3环境搭建一直是搜索热词我理解大家的痛点明明照着官网敲怎么就报错了以vite为例新建项目用npm create vitelatest但如果你在node 14的版本下跑vite 5大概率直接报错。所以环境搭建的第一步永远是检查版本node的版本、npm的版本、vite的版本、vue的版本四者要匹配。node 16以下建议用vite 3node 18以上可以用vite 5这是我实际踩过坑总结出来的经验。再说ts报错很多人在vue3项目里遇到“找不到模块‘./App.vue’”这类报错其实是ts不认识.vue文件。解决方案是在项目根目录建一个env.d.ts/// reference typesvite/client / declare module *.vue { import type { DefineComponent } from vue const component: DefineComponent{}, {}, any export default component }这类问题的排查思路是先确认报错来自ts还是构建工具再看是类型声明缺失还是路径错误。不要遇到报错就去改tsconfig.json的strict大概率越改越乱。还有scss配置vite项目里想用scss不是npm i sass就完事需要在vite.config里配置css.preprocessorOptions.scss.additionalData才能全局注入变量。这些小坑每一个都能卡住人半小时但知道一次之后以后就是肌肉记忆了。6.4 高频问题速查表问题现象排查思路兜底方案登录成功不跳转检查路由守卫的store实例、meta字段先确保pinia实例初始化再在守卫内部获取store组件on-success不触发确认组件版本、事件名、emit声明用http-request自定义请求绕开组件事件拖拽排序失效检查版本、key值、事件绑定改用vuedraggablenext确保监听change事件输入框允许负数v-model绑定数据未同步用Math.min/max夹紧再加change兜底vite项目本地打不开局域网检查host配置、防火墙vite.config里server.host: true路由页面刷新404nginx配置history路由回退配置try_files$uri $uri/ /index.html表单校验不生效检查校验属性名、prop绑定确保校验rule的prop和表单字段一致pdf预览白屏检查pdfjs版本、跨域头用iframe指向后端预览接口中转表里这些基本都是我在真实项目里反复遇到的。有一个共同的排查习惯永远先确定是“代码问题”还是“环境问题”。代码问题看console和报错堆栈环境问题看版本和配置。花五分钟确定问题的类别往往比埋头改二十分钟代码高效得多。7. 章节4复习路线图与实际项目里的扩展玩法7.1 一条可以照抄的复习路线如果你正处在“章节4学完了但感觉没学会”的阶段我建议你花一个周末按下面的顺序把知识重新过一遍第一天上午用组合式API重新写一个待办列表强制自己使用ref、reactive、computed、watch不碰任何组件库第一天下午把待办列表拆成三个组件输入组件、列表组件、筛选组件用props/emit/v-model把通信跑通第二天上午给列表加一个自定义指令用来自动聚焦新增输入框再封装一个useTodoList的组合式函数把所有逻辑抽出去第二天下午加一个拖拽排序功能再解决“拖拽后数据不更新”的问题。这四条任务分别对应了响应式、组件通信、自定义指令、组合式函数正好是章节4的四大核心。做完这一轮你对知识点的理解会完全不一样。复习的关键不是重复阅读而是重复练习而且要刻意给自己制造难度。7.2 进阶扩展jsx、微前端与后台模板如果你已经做完基础的复习还觉得有余力我推荐往几个方向扩展。第一个是jsxvite里支持jsx只需要安装vitejs/plugin-vue-jsx然后你就可以在vue组件里写jsx好处是动态渲染逻辑更灵活坏处是模板的可读性下降但理解jsx对看源码特别有帮助。第二个是微前端vue3 vite做微前端方案现在比较成熟了主应用用qiankun或micro-app都能接子应用用vite构建时需要注意跨域和样式隔离这个领域属于加分项拿出去讲很有分量。第三个是后台管理系统模板很多人问“vue3 admin最精简的框架”其实与其下载一个全家桶再删不如自己从零搭一个把路由、pinia、axios、权限控制、动态菜单一步步加进去这也是最好的章节4综合练习。7.3 把章节4当成一块跳板章节4承载的内容说穿了就是把“会用vue3”升级成“能组织vue3项目”。你学完这些之后回头看之前写的代码会发现自己能做出更合理的组件划分、更清晰的状态管理、更易维护的逻辑复用。很多人会问要不要等把vue3全部学完再找工作、再上手项目我的建议是别等在章节4这个阶段就可以试着用组合式API去重构一个老项目里的页面了。学vue3的最好方式就是拿真实业务下手报错了就查查不到就换一种实现方式几次下来项目里全是你的经验。最后再分享一个小技巧把你项目里每一个“解决完就忘了”的问题整理成一个专门的markdown文件文件名叫“坑.md”每周翻一遍。你会发现下一周你同事遇到的问题八成在上面已经写过答案了。这套方法我用了很多年不止适用于vue3学任何技术栈都顺手。
