2023年7月18日发(作者：)
vue项⽬实战经验汇总前⾔vue作为前端主流的3⼤框架之⼀，⽬前在国内有着⾮常⼴泛的应⽤，由于其轻量和⾃底向上的渐进式设计思想，使其不仅仅被应⽤于PC系统，对于移动端，桌⾯软件（electronjs）等也有⼴泛的应⽤，与此诞⽣的优秀的开源框架⽐如elementUI，iView， ant-design-vue等也极⼤的降低了开发者的开发成本，并极⼤的提⾼了开发效率。笔者最初接触vue时也是使⽤的iview框架，亲⾃体会之后确实⾮常易⽤且强⼤。笔者曾经有两年的vue项⽬经验，基于vue做过移动端项⽬和PC端的ERP系统，虽然平时⼯作中采⽤的是react技术栈，但平时还是会积累很多vue相关的最佳实践和做⼀些基于vue的开源项⽬，所以说总结vue的项⽬经验我觉得是最好的成长，也希望给今年想接触vue框架或者想从事vue⼯作的朋友带来⼀些经验和思考。你将收获vue框架使⽤注意事项和最佳经验vue项⽬配置经验总结vue组件设计经验总结vue项⽬架构与服务化探索正⽂本⽂不仅仅是总结⼀些vue使⽤踩过的⼀些坑和项⽬经验，更多的是使⽤框架（vue/react）过程中的⽅法论和组件的设计思路，最后还会有⼀些个⼈对⼯程化的⼀些总结，希望有更多经验的朋友们可以⼀起交流，探索vue的奥妙。在开始⽂章之前，笔者建议⼤家对javascript, css, html基础有⼀定的了解，因为会⽤框架不⼀定能很好的实现业务需求和功能，要想实现不同场景下不同复杂度的需求，⼀定要对web基础有充⾜的了解，所以希望⼤家熟悉如下基础知识，如果不太熟悉可以花时间研究了解⼀下。javascript：数组常⽤⽅法的使⽤，⽐如遍历有forEach，map，filter，every， some，reduce，操作⽅法有splice，slice， join，push，shift， pop，sort等基本数据结构，引⽤类型（对象，数组）基本逻辑运算if else， switch，三⽬运算：？，for/while循环等字符串常见api（如replace，slice， substr，indexOf）基本正则使⽤变量作⽤域，作⽤域链，变量提升，函数声明提升对象基本⽤法，⾯向对象编程css：基本盒模型（border/content/padding等）4种常⽤定位（static/absolute/relative/fixed）常⽤布局⽅式（浮动布局/弹性布局flex/⾃适应布局/⽹格布局grid）css3基本样式与动画（transition，animation）html：新标签基本⽤法和使⽤head标签作⽤与⽤法（主要是meta属性的⽤法）所以希望⼤家掌握好以上基础知识，也是前端开发的基础，接下来我们直接进⼊正⽂。1. vue框架使⽤注意事项和最佳经验vue学习最快的⽅式就是实践，根据官⽹多写⼏个例⼦是掌握vue最快的⽅式。 接下来笔者就来总结⼀下在开发vue项⽬中的⼀些实践经验。1.1 vue⽣命周期以及不同⽣命周期下的应⽤以上是vue官⽹上的⽣命周期的⽅法，⼤致划分⼀下分为创建前/后，挂载前/后，更新前/后，销毁前/后这四个阶段。各个阶段的状态总结如下：beforeCreate：在beforeCreate⽣命周期执⾏时，data和methods中的数据还未初始化，所以此时不能使⽤data中的数据和methods中的⽅法create：data 和 methods初始化完毕，此时可以使⽤methods 中的⽅法和data 中的数据beforeMount：template模版已经编译好，但还未挂载到页⾯，此时页⾯还是上⼀个状态mounted：此时Vue实例初始化完成了，DOM挂载完毕，可以直接操作dom或者使⽤第三⽅dom库beforeUpdate： 此时data已更新，但还未同步页⾯updated：data和页⾯都已经更新完成beforeDestory：Vue实例进⼊销毁阶段，但所有的 data 和 methods ， 指令， 过滤器等都处于可⽤状态destroyed： 此时组件已经被销毁，data，methods等都不可⽤根据以上介绍，页⾯第⼀次加载时会执⾏ beforeCreate， created， beforeMount， mounted这四个⽣命周期，所以我们⼀般在created阶段处理http请求获取数据或者对data做⼀定的处理， 我们会在mounted阶段操作dom，⽐如使⽤jquery，或者其他第三⽅dom库。其次，根据以上不同周期下数据和页⾯状态的不同，我们还可以做其他更多操作，所以说每个⽣命周期的发展状态⾮常重要，⼀定要理解，这样才能对vue有更多的控制权。1.2 vue常⽤的指令以及动态指令的使⽤指令 (Directives) 是带有 v- 前缀的特殊属性，vue常⽤的指令有：v-bind ⽤于响应式地更新 HTML属性v-if 根据表达式的值的真假来决定是否插⼊/移除元素v-on ⽤于监听 DOM 事件v-show ⽤于决定是否展⽰该元素，底层通过display：none实现v-html 在dom内插⼊html内容v-for 循环v-text 渲染指定dom的内容⽂本v-cloak 和CSS规则如 [v-cloak] { display: none } ⼀起⽤，可以隐藏未编译的 Mustache 标签直到实例准备完毕以上是⽐较常⽤的指令，具体⽤法就不⼀⼀举例了，其中v-cloak主要是⽤来避免页⾯加载时出现闪烁的问题，可以结合css的[v-cloak] { display: none }⽅式解决这⼀问题。关于指令的动态参数，使⽤也很简单，虽然是2.6.0 新增的，但是⽅法很灵活，具体使⽤如下： ... 复制代码我们可以根据具体情况动态切换事件名，从⽽绑定同⼀个函数。1.3 vue常⽤修饰符及作⽤1. 事件修饰符.stop 阻⽌事件冒泡.prevent 阻⽌事件默认⾏为.self 事件绑定的元素本⾝触发时才触发回调.once 事件只能触发⼀次，第⼆次就不会触发了.native 将⼀个vue组件变成⼀个普通的html，使其可以监听click等原⽣事件 具体使⽤如下：
1.5 vue实现按需加载组件组件的按需加载是项⽬性能优化的⼀个环节，也可以降低⾸屏渲染时间，笔者在项⽬中⽤到的组件按需加载的⽅式如下：1. 使⽤() => import()， 具体代码如下：children & $refs⽅法来通信