vue3的发布与 vue相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松
在vue2版本里。不管数据多大,都会在一开始就为其创建观察者,在数据很大时,就会造成性能的问题。在vue3中,只会对渲染出来的数据创建观察者,而且vue3的观察者更高效,还有更好的TypeScript支持,以及 PWA 的支持
1,vue2用的选项API,vue3用的组合API
选项API:一个功能的实现需要在不同的vue配置项中定义属性和方法,比较分散,项目小还好,清晰明了,但是项目大了后,一个methods
中可能包含很多个方法,经常分不清哪个方法对应着哪个功能,想要新增一个功能的时候,需要在 data,methods……这些里面
都写要写一些东西,这时候每个选项里的内容都很多,需要上下来回的翻滚,影响效率。
组合式API:通过创建 Vue 组件,我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段,使用的操作主要在setup回调函数中,它在创建组件之前执行,因此在setup选项中没有this.
setup只能同步的不能异步操作的,在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再页面中使用
2.vue2双向绑定用Object.defineProperty,而vue3变成proxy,有一定的性能提升,可直接实现对象属性的新增/删除,可直接监听数组类型的数据变化。把一个功能所有有关的代码放在一起,合理也好维护,可以随时将功能的一部分拆分出去。可以把每一个功能相关所有的东西比如methods
,computed...
都放在一个function
中,这个function
可以独立的存在,可以放在一个TS文件中,也可在npm
中单独发布,最终组合API会
把他们组合在一起使用
3.vue3与vue2比在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
4.vue3最常用的有3个函数ref,reactive,toRefs;
ref:声明简单数据类型,还有数组
reactive:声明响应式对象,
toRefs:用于创建对象的响应式;对对象结构赋值