【Vue3Props/Emit/事件总线】组件通信场景从基础用法到实战规范彻底搞懂组件解耦方案避开耦合过重与内存泄漏坑 文章目录一、为什么需要组件解耦二、三种主流通信方式速览三、Props父传子单向数据流3.1 基本用法3.2 第一个坑子组件修改 props3.3 第二个坑传对象/数组时“意外共享”3.4 Props 规范小结四、Emit子通知父事件驱动4.1 基本用法4.2 v-model 本质props emit 的语法糖4.3 坑事件名大小写4.4 Emit 规范小结五、事件总线跨组件通信需谨慎5.1 适用场景5.2 Vue3 的推荐做法mitt / tiny-emitter5.3 事件总线的坑5.4 替代方案provide / inject5.5 事件总线使用规范六、实战一个完整案例6.1 结构设计6.2 完整代码示例6.3 这样设计的好处七、选择决策速查八、总结 系列模块导航同学们好我是 Eugene尤金一名多年中后台前端开发工程师。Eugene 发音 /juːˈdʒiːn/大家怎么顺口怎么叫就好很多前端开发者都会遇到一个瓶颈代码能跑但不够规范功能能实现但维护起来特别痛苦一个人写没问题一到团队协作就各种混乱、踩坑、返工。想写出干净、优雅、可维护的专业代码靠的不是天赋而是体系化的规范 真实实战经验。这一系列《前端规范实战》我会用大白话 真实业务场景不讲玄学、不堆理论只分享能直接落地的规范、标准与避坑指南。帮你从「会写代码」真正升级为「会写优质、可维护、团队级别的代码」。一、为什么需要组件解耦组件写多了就容易出现这种情况子组件到处$parent、$children乱用一层层props往下传、再一层层emit往上冒组件之间互相强依赖改一个影响一片这些问题本质都是耦合过重组件之间关系太紧难以独立复用和测试。本文的目标是用清晰的规范告诉你「什么场景用什么方式」「为什么这么选」「坑在哪」让组件之间保持合适的关系。⬆ 返回目录二、三种主流通信方式速览方式方向适用场景耦合程度Props父 → 子父把数据传给子低单向、显式Emit子 → 父子通知父做某件事低事件驱动事件总线任意跨层级、兄弟组件中需谨慎下面按「基础用法 → 常见坑 → 实战规范」的顺序展开。⬆ 返回目录三、Props父传子单向数据流3.1 基本用法!-- 父组件 Parent.vue --templatedivChild:user-nameuserName:countcount//div/templatescriptsetupimport{ref}fromvueimportChildfrom./Child.vueconstuserNameref(张三)constcountref(0)/script!-- 子组件 Child.vue --templatedivp用户名{{ userName }}/pp数量{{ count }}/p/div/templatescriptsetup// 方式一直接使用无类型约束constpropsdefineProps([userName,count])// 方式二带类型和默认值推荐defineProps({userName:{type:String,required:true},count:{type:Number,default:0}})/script要点user-name是 kebab-case对应 JS 里的userNamecamelCaseProps 是只读的不要在子组件里直接改⬆ 返回目录3.2 第一个坑子组件修改 props❌ 错误示例scriptsetupconstpropsdefineProps([count])// 不要这样违反单向数据流consthandleClick(){props.count// 控制台会警告}/script正确做法有两种用emit通知父组件由父组件改用computed做一个本地的“可写副本”仅当确实需要本地编辑时✅ 推荐做法scriptsetupconstpropsdefineProps([count])constemitdefineEmits([update:count])consthandleClick(){emit(update:count,props.count1)}/script父组件用v-model或update:count接收。⬆ 返回目录3.3 第二个坑传对象/数组时“意外共享”!-- 父组件 --Child:configsharedConfig/如果多个子组件接收同一个对象引用在一个组件里改config.xxx别的组件也会跟着变。✅ 建议需要“独立副本”时在父组件传时做一次拷贝Child:config{ ...sharedConfig }/!-- 或者用 toRef 等方式按需决定 --⬆ 返回目录3.4 Props 规范小结命名父模板用 kebab-case子组件定义用 camelCase类型尽量用对象式defineProps写明type、default、required禁止子组件直接修改 props复杂数据注意引用共享必要时传副本或做深拷贝⬆ 返回目录四、Emit子通知父事件驱动4.1 基本用法!-- 子组件 SubmitButton.vue --templatebuttonclickhandleSubmit提交/button/templatescriptsetupconstemitdefineEmits([submit])consthandleSubmit(){emit(submit,{timestamp:Date.now()})}/script!-- 父组件 --templateSubmitButtonsubmitonSubmit//templatescriptsetupconstonSubmit(payload){console.log(收到提交事件,payload)}/script要点子组件只负责“发出事件 带参数”不关心父组件怎么处理事件名建议用 kebab-casesubmit、update:count⬆ 返回目录4.2 v-model 本质props emit 的语法糖!-- 这两种写法等价 --Childv-modelvalue/Child:modelValuevalueupdate:modelValuevalue $event/子组件对应写法scriptsetupconstpropsdefineProps([modelValue])constemitdefineEmits([update:modelValue])constupdateValue(val){emit(update:modelValue,val)}/script多个 v-modelChildv-model:titletitlev-model:contentcontent/对应title/content的props和update:title、update:content事件。⬆ 返回目录4.3 坑事件名大小写HTML 不区分大小写所以推荐update-count、emit(update-count)不推荐updateCount在模板里可能被转成小写导致监听不到⬆ 返回目录4.4 Emit 规范小结事件名用 kebab-casepayload需要传参时用对象{ ... }便于扩展职责子组件只负责“触发 传参”业务逻辑尽量放在父组件v-model理解成modelValueupdate:modelValue多字段用v-model:xxx⬆ 返回目录五、事件总线跨组件通信需谨慎5.1 适用场景兄弟组件之间跨多层级爷孙、更远全局提示、主题切换等⬆ 返回目录5.2 Vue3 的推荐做法mitt / tiny-emitterVue3 移除了$on、$off、$emit不再内置事件总线推荐用 mitt 等库。npminstallmitt// utils/eventBus.jsimportmittfrommittexportconsteventBusmitt()!-- 组件 A发布 --scriptsetupimport{eventBus}from/utils/eventBusconstsend(){eventBus.emit(user-login,{userId:123})}/script!-- 组件 B订阅 --scriptsetupimport{onMounted,onUnmounted}fromvueimport{eventBus}from/utils/eventBusconsthandler(payload){console.log(收到登录事件,payload)}onMounted((){eventBus.on(user-login,handler)})onUnmounted((){eventBus.off(user-login,handler)// 必须解绑})/script⬆ 返回目录5.3 事件总线的坑忘记 off组件销毁后监听还在可能内存泄漏、重复执行事件满天飞事件名不统一、到处 emit难维护数据流不清晰谁发的、谁在听不直观⬆ 返回目录5.4 替代方案provide / inject跨层级传数据时用provide/inject比事件总线更直观!-- 祖先组件 --scriptsetupimport{provide,ref}fromvueconstthemeref(dark)provide(theme,theme)/script!-- 任意子孙组件 --scriptsetupimport{inject}fromvueconstthemeinject(theme)/script更适合主题、语言、用户信息这类“向下传递的上下文”。⬆ 返回目录5.5 事件总线使用规范能 Props Emit 解决的优先用 Props Emit必须用事件总线时统一在eventBus.js管理事件名加前缀如app:user-login在 onUnmounted 中一定要 off跨层级传数据优先考虑provide/inject或 Pinia⬆ 返回目录六、实战一个完整案例6.1 结构设计ProductPage (父) ├── FilterBar (筛选) — props: 无 / emit: filter-change ├── ProductList (列表) — props: products, loading / emit: add-to-cart └── CartSummary (摘要) — props: cartCount数据流父组件管理filter、products、cartCount子组件只负责“触发事件”。⬆ 返回目录6.2 完整代码示例!-- ProductPage.vue 父页面 --templatedivclassproduct-pageFilterBarfilter-changehandleFilterChange/ProductList:productsfilteredProducts:loadingloadingadd-to-carthandleAddToCart/CartSummary:cart-countcartCount//div/templatescriptsetupimport{ref,computed}fromvueimportFilterBarfrom./FilterBar.vueimportProductListfrom./ProductList.vueimportCartSummaryfrom./CartSummary.vueconstfilterref({category:,keyword:})constproductsref([])constcartCountref(0)constloadingref(false)constfilteredProductscomputed((){letlistproducts.valueif(filter.value.category){listlist.filter(pp.categoryfilter.value.category)}if(filter.value.keyword){listlist.filter(pp.name.includes(filter.value.keyword))}returnlist})consthandleFilterChange(newFilter){filter.value{...filter.value,...newFilter}}consthandleAddToCart(productId){cartCount.value// 实际项目中这里会调接口、更新购物车等}/script!-- FilterBar.vue 筛选组件 --templatedivclassfilter-barselectv-modellocalCategorychangeemitFilteroptionvalue全部分类/optionoptionvalue电子电子/optionoptionvalue服饰服饰/option/selectinputv-modellocalKeywordplaceholder搜索inputemitFilter//div/templatescriptsetupimport{ref,watch}fromvueconstemitdefineEmits([filter-change])constlocalCategoryref()constlocalKeywordref()constemitFilter(){emit(filter-change,{category:localCategory.value,keyword:localKeyword.value})}/script!-- ProductList.vue 列表组件 --templatedivclassproduct-listdivv-ifloading加载中.../divdivv-elsev-forp in products:keyp.idclassproduct-itemspan{{ p.name }}/spanbuttonclickemit(add-to-cart, p.id)加入购物车/button/div/div/templatescriptsetupdefineProps({products:{type:Array,default:()[]},loading:{type:Boolean,default:false}})defineEmits([add-to-cart])/script!-- CartSummary.vue 购物车摘要 --templatedivclasscart-summary购物车{{ cartCount }} 件/div/templatescriptsetupdefineProps({cartCount:{type:Number,default:0}})/script⬆ 返回目录6.3 这样设计的好处单向数据流数据在父组件子组件只读 props、只发事件职责清晰FilterBar 管筛选、ProductList 管展示和点击、CartSummary 管展示数量易测试每个组件可单独测 props 和 emit易扩展加新筛选项、新列表列不影响其他组件⬆ 返回目录七、选择决策速查场景推荐方式说明父传子数据Props单向、清晰子通知父Emit事件驱动、解耦兄弟组件提升到共同父级用 PropsEmit或事件总线优先提升 state跨多层级传数据provide/inject比事件总线更适合上下文跨多层级发事件事件总线 或 Pinia事件总线要规范使用全局状态Pinia官方推荐⬆ 返回目录八、总结Props父 → 子只读不直接修改Emit子 → 父用 kebab-case 事件名payload 用对象事件总线跨组件时用要记得 off能不用尽量不用核心原则单向数据流、职责单一、显式通信先把 Props 和 Emit 用熟再按需使用 provide/inject 或事件总线组件之间的关系会清晰很多维护和排错都会更轻松。⬆ 返回目录 系列模块导航 编码语法规范一、《Vue3 组件拆分实战规范页面 / 业务 / 基础组件边界清晰化高内聚低耦合落地指南Vue 组件与模板规范篇》二、《Vue3 Props 传参实战规范必传校验 默认值 类型标注避开 undefined / 类型混用坑Vue 组件与模板规范篇》三、《Vue3 模板语法规范实战v-if/v-for 不混用 表达式精简避坑指南Vue 组件与模板规范篇》四、《Vue3 样式实战scoped 深度选择器 BEM 规范解决冲突与穿透失效Vue 组件与模板规范篇》五、《Vue3 组合式函数Hooks封装规范实战命名 / 输入输出 / 复用边界 避坑Vue 组件与模板规范篇》六、《Vue3 Element Plus 中后台弹窗规范开闭、传参、回调告别弹窗地狱Vue 组件与模板规范篇》七、《Vue3 组件解耦实战Props/Emit/ 事件总线用法 避坑指南Vue 组件与模板规范》 跟着系列慢慢学把技术功底扎扎实实地打牢 系列总览「前端规范实战系列」正在持续更新中后续会整理一篇《前端规范实战系列全系列目录导航》包含每篇文章简介 直达链接方便大家按顺序、体系化学习。更新中敬请期待⬆ 返回目录技术成长从来不是比谁写得快而是比谁写得稳、规范、可维护。哪怕每次只吃透一条规范长期下来差距会非常明显。后续我会持续更新前端规范、工程化、可维护代码相关实战干货帮你告别面条代码、维护噩梦在开发与面试中更有底气。觉得有用欢迎点赞 收藏 关注不错过每一篇实战内容。我是 Eugene与你一起写规范、写优质代码我们下篇干货见
Vue3 组件解耦实战：Props/Emit/ 事件总线用法 + 避坑指南｜Vue 组件与模板规范
【Vue3Props/Emit/事件总线】组件通信场景从基础用法到实战规范彻底搞懂组件解耦方案避开耦合过重与内存泄漏坑 文章目录一、为什么需要组件解耦二、三种主流通信方式速览三、Props父传子单向数据流3.1 基本用法3.2 第一个坑子组件修改 props3.3 第二个坑传对象/数组时“意外共享”3.4 Props 规范小结四、Emit子通知父事件驱动4.1 基本用法4.2 v-model 本质props emit 的语法糖4.3 坑事件名大小写4.4 Emit 规范小结五、事件总线跨组件通信需谨慎5.1 适用场景5.2 Vue3 的推荐做法mitt / tiny-emitter5.3 事件总线的坑5.4 替代方案provide / inject5.5 事件总线使用规范六、实战一个完整案例6.1 结构设计6.2 完整代码示例6.3 这样设计的好处七、选择决策速查八、总结 系列模块导航同学们好我是 Eugene尤金一名多年中后台前端开发工程师。Eugene 发音 /juːˈdʒiːn/大家怎么顺口怎么叫就好很多前端开发者都会遇到一个瓶颈代码能跑但不够规范功能能实现但维护起来特别痛苦一个人写没问题一到团队协作就各种混乱、踩坑、返工。想写出干净、优雅、可维护的专业代码靠的不是天赋而是体系化的规范 真实实战经验。这一系列《前端规范实战》我会用大白话 真实业务场景不讲玄学、不堆理论只分享能直接落地的规范、标准与避坑指南。帮你从「会写代码」真正升级为「会写优质、可维护、团队级别的代码」。一、为什么需要组件解耦组件写多了就容易出现这种情况子组件到处$parent、$children乱用一层层props往下传、再一层层emit往上冒组件之间互相强依赖改一个影响一片这些问题本质都是耦合过重组件之间关系太紧难以独立复用和测试。本文的目标是用清晰的规范告诉你「什么场景用什么方式」「为什么这么选」「坑在哪」让组件之间保持合适的关系。⬆ 返回目录二、三种主流通信方式速览方式方向适用场景耦合程度Props父 → 子父把数据传给子低单向、显式Emit子 → 父子通知父做某件事低事件驱动事件总线任意跨层级、兄弟组件中需谨慎下面按「基础用法 → 常见坑 → 实战规范」的顺序展开。⬆ 返回目录三、Props父传子单向数据流3.1 基本用法!-- 父组件 Parent.vue --templatedivChild:user-nameuserName:countcount//div/templatescriptsetupimport{ref}fromvueimportChildfrom./Child.vueconstuserNameref(张三)constcountref(0)/script!-- 子组件 Child.vue --templatedivp用户名{{ userName }}/pp数量{{ count }}/p/div/templatescriptsetup// 方式一直接使用无类型约束constpropsdefineProps([userName,count])// 方式二带类型和默认值推荐defineProps({userName:{type:String,required:true},count:{type:Number,default:0}})/script要点user-name是 kebab-case对应 JS 里的userNamecamelCaseProps 是只读的不要在子组件里直接改⬆ 返回目录3.2 第一个坑子组件修改 props❌ 错误示例scriptsetupconstpropsdefineProps([count])// 不要这样违反单向数据流consthandleClick(){props.count// 控制台会警告}/script正确做法有两种用emit通知父组件由父组件改用computed做一个本地的“可写副本”仅当确实需要本地编辑时✅ 推荐做法scriptsetupconstpropsdefineProps([count])constemitdefineEmits([update:count])consthandleClick(){emit(update:count,props.count1)}/script父组件用v-model或update:count接收。⬆ 返回目录3.3 第二个坑传对象/数组时“意外共享”!-- 父组件 --Child:configsharedConfig/如果多个子组件接收同一个对象引用在一个组件里改config.xxx别的组件也会跟着变。✅ 建议需要“独立副本”时在父组件传时做一次拷贝Child:config{ ...sharedConfig }/!-- 或者用 toRef 等方式按需决定 --⬆ 返回目录3.4 Props 规范小结命名父模板用 kebab-case子组件定义用 camelCase类型尽量用对象式defineProps写明type、default、required禁止子组件直接修改 props复杂数据注意引用共享必要时传副本或做深拷贝⬆ 返回目录四、Emit子通知父事件驱动4.1 基本用法!-- 子组件 SubmitButton.vue --templatebuttonclickhandleSubmit提交/button/templatescriptsetupconstemitdefineEmits([submit])consthandleSubmit(){emit(submit,{timestamp:Date.now()})}/script!-- 父组件 --templateSubmitButtonsubmitonSubmit//templatescriptsetupconstonSubmit(payload){console.log(收到提交事件,payload)}/script要点子组件只负责“发出事件 带参数”不关心父组件怎么处理事件名建议用 kebab-casesubmit、update:count⬆ 返回目录4.2 v-model 本质props emit 的语法糖!-- 这两种写法等价 --Childv-modelvalue/Child:modelValuevalueupdate:modelValuevalue $event/子组件对应写法scriptsetupconstpropsdefineProps([modelValue])constemitdefineEmits([update:modelValue])constupdateValue(val){emit(update:modelValue,val)}/script多个 v-modelChildv-model:titletitlev-model:contentcontent/对应title/content的props和update:title、update:content事件。⬆ 返回目录4.3 坑事件名大小写HTML 不区分大小写所以推荐update-count、emit(update-count)不推荐updateCount在模板里可能被转成小写导致监听不到⬆ 返回目录4.4 Emit 规范小结事件名用 kebab-casepayload需要传参时用对象{ ... }便于扩展职责子组件只负责“触发 传参”业务逻辑尽量放在父组件v-model理解成modelValueupdate:modelValue多字段用v-model:xxx⬆ 返回目录五、事件总线跨组件通信需谨慎5.1 适用场景兄弟组件之间跨多层级爷孙、更远全局提示、主题切换等⬆ 返回目录5.2 Vue3 的推荐做法mitt / tiny-emitterVue3 移除了$on、$off、$emit不再内置事件总线推荐用 mitt 等库。npminstallmitt// utils/eventBus.jsimportmittfrommittexportconsteventBusmitt()!-- 组件 A发布 --scriptsetupimport{eventBus}from/utils/eventBusconstsend(){eventBus.emit(user-login,{userId:123})}/script!-- 组件 B订阅 --scriptsetupimport{onMounted,onUnmounted}fromvueimport{eventBus}from/utils/eventBusconsthandler(payload){console.log(收到登录事件,payload)}onMounted((){eventBus.on(user-login,handler)})onUnmounted((){eventBus.off(user-login,handler)// 必须解绑})/script⬆ 返回目录5.3 事件总线的坑忘记 off组件销毁后监听还在可能内存泄漏、重复执行事件满天飞事件名不统一、到处 emit难维护数据流不清晰谁发的、谁在听不直观⬆ 返回目录5.4 替代方案provide / inject跨层级传数据时用provide/inject比事件总线更直观!-- 祖先组件 --scriptsetupimport{provide,ref}fromvueconstthemeref(dark)provide(theme,theme)/script!-- 任意子孙组件 --scriptsetupimport{inject}fromvueconstthemeinject(theme)/script更适合主题、语言、用户信息这类“向下传递的上下文”。⬆ 返回目录5.5 事件总线使用规范能 Props Emit 解决的优先用 Props Emit必须用事件总线时统一在eventBus.js管理事件名加前缀如app:user-login在 onUnmounted 中一定要 off跨层级传数据优先考虑provide/inject或 Pinia⬆ 返回目录六、实战一个完整案例6.1 结构设计ProductPage (父) ├── FilterBar (筛选) — props: 无 / emit: filter-change ├── ProductList (列表) — props: products, loading / emit: add-to-cart └── CartSummary (摘要) — props: cartCount数据流父组件管理filter、products、cartCount子组件只负责“触发事件”。⬆ 返回目录6.2 完整代码示例!-- ProductPage.vue 父页面 --templatedivclassproduct-pageFilterBarfilter-changehandleFilterChange/ProductList:productsfilteredProducts:loadingloadingadd-to-carthandleAddToCart/CartSummary:cart-countcartCount//div/templatescriptsetupimport{ref,computed}fromvueimportFilterBarfrom./FilterBar.vueimportProductListfrom./ProductList.vueimportCartSummaryfrom./CartSummary.vueconstfilterref({category:,keyword:})constproductsref([])constcartCountref(0)constloadingref(false)constfilteredProductscomputed((){letlistproducts.valueif(filter.value.category){listlist.filter(pp.categoryfilter.value.category)}if(filter.value.keyword){listlist.filter(pp.name.includes(filter.value.keyword))}returnlist})consthandleFilterChange(newFilter){filter.value{...filter.value,...newFilter}}consthandleAddToCart(productId){cartCount.value// 实际项目中这里会调接口、更新购物车等}/script!-- FilterBar.vue 筛选组件 --templatedivclassfilter-barselectv-modellocalCategorychangeemitFilteroptionvalue全部分类/optionoptionvalue电子电子/optionoptionvalue服饰服饰/option/selectinputv-modellocalKeywordplaceholder搜索inputemitFilter//div/templatescriptsetupimport{ref,watch}fromvueconstemitdefineEmits([filter-change])constlocalCategoryref()constlocalKeywordref()constemitFilter(){emit(filter-change,{category:localCategory.value,keyword:localKeyword.value})}/script!-- ProductList.vue 列表组件 --templatedivclassproduct-listdivv-ifloading加载中.../divdivv-elsev-forp in products:keyp.idclassproduct-itemspan{{ p.name }}/spanbuttonclickemit(add-to-cart, p.id)加入购物车/button/div/div/templatescriptsetupdefineProps({products:{type:Array,default:()[]},loading:{type:Boolean,default:false}})defineEmits([add-to-cart])/script!-- CartSummary.vue 购物车摘要 --templatedivclasscart-summary购物车{{ cartCount }} 件/div/templatescriptsetupdefineProps({cartCount:{type:Number,default:0}})/script⬆ 返回目录6.3 这样设计的好处单向数据流数据在父组件子组件只读 props、只发事件职责清晰FilterBar 管筛选、ProductList 管展示和点击、CartSummary 管展示数量易测试每个组件可单独测 props 和 emit易扩展加新筛选项、新列表列不影响其他组件⬆ 返回目录七、选择决策速查场景推荐方式说明父传子数据Props单向、清晰子通知父Emit事件驱动、解耦兄弟组件提升到共同父级用 PropsEmit或事件总线优先提升 state跨多层级传数据provide/inject比事件总线更适合上下文跨多层级发事件事件总线 或 Pinia事件总线要规范使用全局状态Pinia官方推荐⬆ 返回目录八、总结Props父 → 子只读不直接修改Emit子 → 父用 kebab-case 事件名payload 用对象事件总线跨组件时用要记得 off能不用尽量不用核心原则单向数据流、职责单一、显式通信先把 Props 和 Emit 用熟再按需使用 provide/inject 或事件总线组件之间的关系会清晰很多维护和排错都会更轻松。⬆ 返回目录 系列模块导航 编码语法规范一、《Vue3 组件拆分实战规范页面 / 业务 / 基础组件边界清晰化高内聚低耦合落地指南Vue 组件与模板规范篇》二、《Vue3 Props 传参实战规范必传校验 默认值 类型标注避开 undefined / 类型混用坑Vue 组件与模板规范篇》三、《Vue3 模板语法规范实战v-if/v-for 不混用 表达式精简避坑指南Vue 组件与模板规范篇》四、《Vue3 样式实战scoped 深度选择器 BEM 规范解决冲突与穿透失效Vue 组件与模板规范篇》五、《Vue3 组合式函数Hooks封装规范实战命名 / 输入输出 / 复用边界 避坑Vue 组件与模板规范篇》六、《Vue3 Element Plus 中后台弹窗规范开闭、传参、回调告别弹窗地狱Vue 组件与模板规范篇》七、《Vue3 组件解耦实战Props/Emit/ 事件总线用法 避坑指南Vue 组件与模板规范》 跟着系列慢慢学把技术功底扎扎实实地打牢 系列总览「前端规范实战系列」正在持续更新中后续会整理一篇《前端规范实战系列全系列目录导航》包含每篇文章简介 直达链接方便大家按顺序、体系化学习。更新中敬请期待⬆ 返回目录技术成长从来不是比谁写得快而是比谁写得稳、规范、可维护。哪怕每次只吃透一条规范长期下来差距会非常明显。后续我会持续更新前端规范、工程化、可维护代码相关实战干货帮你告别面条代码、维护噩梦在开发与面试中更有底气。觉得有用欢迎点赞 收藏 关注不错过每一篇实战内容。我是 Eugene与你一起写规范、写优质代码我们下篇干货见
