vue3.x绝对比vue2.x次要的利用区别在于setup
的应用,这个也是vue3.x的特色,所有的性能都得通过vue钩子引入应用,因为 setup
语法糖环境是不反对 this
的,这种开发方式有点回到原始的感觉,针对小我的项目还好,但如果页面模块性能简单,如果都放到一个文件里重叠,不仅会造成可读性差,而且工夫长了难以保护,所以这就须要进行按性能拆分了,形式同vue2.x一样,一个是依照组件拆分,一个是混入解决,还有就是通过vuex或api拆散性能
一、 组件
能够把一些新增/编辑、配置、日志及公共操作等写到组件里,而后引入应用,组件拆分是次要的缩小页面代码量的解决形式,也是vue举荐的形式
PS:组件拆分的方向,一是公共组件,在我的项目其余模块也能应用到,二是页面级公有组件
二、混入
混入的场景次要是针对不须要模块且利用性能点过多,像这种能够通过混入的形式,把一些性能点拆分进去,引入应用,示例:
mixins/instuctLog.ts:
export default function() { const a = 123 function foo() { console.log('foo') } return { a, foo }}
页面:
<script lang="ts" setup>import instructLogMixin from './mixins/instructLog'const { a, foo } = instructLogMixin()</script>
三、api
把页面模块中的一些api申请放到api目录里引入应用
四、vuex
按页面模块划分,把一些页面配置、枚举数据及数据扭转多组件响应更新的逻辑放到vuex中解决
更多前端常识,请关注小程序,不定期有惊喜!