开始,以最简单的使用场景:导入一个Hello的组件,并使用它
你将发现:1,没有组件的引入,没有组件在父组件中的声明,代码至少减少4行,减少了程序员的头脑风暴(引入文件在哪里+组件引入要声明);2,使用 setup 语法糖,减少vue3默认规则的 ref,reactive等方法的引入,达到想用即用;
以上的场景是一个最简单的场景,下面将介绍在他们在开发效率 + 多人合作 + 代码健壮性上的体现。
一,Vite
如果使用过webpack开发过中型项目以上的,又当你真正尝试过使用vite创建和开发项目后,第一印象:“秒开!”,这里不做多的说明,反正去试一波,哪怕一次,你就懂了。
没有体验过的朋友,跳转vite官网(https://vitejs.cn/),赶紧体验!
二,vue3
vue3 更快,更强!【可搜索 vue3 diff算法】
开发上,使用Component API,不用在每个组件中写明“methods”,这使用方法与组件脱离,易于抽离业务逻辑,也提供更完整和健壮的开发环境,虽然这样的方法vue2中我们也可以进行抽离,但结合组件内的数据时,这里不得不考虑参数,渲染乃至其他全局因素的影响;
响应式的数据使用ref和reactive标识即可,将数据和组件分离,你可以尝试使用创建一个函数方法,返回一个reactive的对象,在其他页面调用后即可直接渲染到组件页面;
这里的编码推荐使用setup 语法糖,可以体验到不写任何的vue实例对象默认属性,只需要掌握:defineProps, defineEmits,defineExpose, watch, watchPostEffect ,provide/inject,稍后会结合ts一起具体讲解;
三,TypeScript
typescript 使用得比较浅薄,本来写的demo中想到一些对象呀,接口呀,实例化呀,构造函数呀,但是最后归结下来,几乎只用接口 interface,这里单论平常的前端开发中,不包括地图,游戏等场景;
用ts的好处是提前定义,代码提示及帮助得到更清晰的前后端交互逻辑;强类型标志更高的要求,但给凌乱的前端却是更大的好处,每个前端开发者应该都体会过字符串数字和纯数字的相关bug;那么,有人会说,还不是要自己对着文档写一遍interface,这拉低了效率, 这里有在线工具(https://tooltt.com/json2typescript/)帮助生产interface,只需要在swagger文档中复制,粘贴到工具中,再复制生成的接口,对接口进行可能存在细微改动即可,这样不仅不写再像从前写一遍接收数据+渲染数据,还能在后续的业务更替中起到支撑效果(不再担心api的改动,对象属性变化等等);
以用户登陆用例说明:
编写前,复制后端提供的swagger文档,生成项目接口文件,ILoginInput及ILoginDto用于传入和接收数据,将接收到的数据转为reactive,即可进行数据渲染【可以想想,在html中编渲染某个对象的属性时,会有对象属性方法提示,再想想之前的做法 --> 疯狂滚动鼠标轮,翻到Data定义的区域,找那个你要的对象的那个属性....】;
当前以上只是说明一个很简单的案例,实际开发中肯定需要添加hooks方法,添加组件本身的处理方法,我的做法是,数据接收接口的interface是全局,但组件内容的interface需要自己创建,这为别人使用你的组件提供极大的便利;
四,插件推荐
unplugin-auto-import 和 unplugin-vue-components -->>> 无需引用插件和vue实例自身属性,自带tree-shaking,实现真正的按需加载;
使用ui框架的朋友也可以将其组件加入到设置中!!!
vite.config.ts中设置
五,[endif]vue3 setup语法糖详解
5.1 defineProps 定义传入参数
默认值使用withDefaults,这里组件内容ITest接口用于本组件的业务场面,可以接收外部的hooks方法【本人这么认为,当然也会别的方式方法】
5.2 defineEmits 子组件暴露信息到父组件
5.3 defineExpose 控制本组件暴露出去的信息(setup形式默认封闭)
父组件中使用-同名- ref接收,修改ref类型的值,子组件会更新视图
5.4 watch & watchPostEffect 监听变化
5.5 provide - inject 跨组件/多组件传参
父组件提供
子组件接收,父组件可以提供修改数据的方法,子组件使用
其他的例如生命周期,hooks函数,axios请求封装,开发生产设置,代理设置等等,网络上皆可查到;
六,总结
代码行数减少N行,解放了原有的选项开发的思维;vite及相关插件帮助了开发业务代码的纯洁性,就如开头的例子,原来的20秒的时间现在只需要3-5秒即可完成;ts简单场景应用等于不用学,编码接受度上需要2-3天习惯,同时setup语法糖同时进行,意味着,2-3天就可以进行较为熟练的开发。
真香警告!