因为现在Vue3.0都发布了正式版,我也抽时间出来学习了一下,自己总结了一下Vue3.0相比Vue2.0的优势,如有不足欢迎评论区里指出!

Vue3.0的优势

1.性能比Vue2.x快了1.2~2.0倍。
2.支持按需编译,体积比Vue2.x更小。
3.组合API。
4.更好的Ts支持。
5.暴露了自定义渲染API。
6.更先进的组件。

一 Vue3.0是如何变快的?

1.diff方法优化:
	在页面发生变化的时候,Vue2中的虚拟dom是进行全量的对比,而Vue3是新增了静态标记(PatchFlag),在与上次虚拟节点进行对比的时候,只会对比带有patch flag的节点,并且可以通过flag的信息得知当前节点要对比的具体内容。
2.静态提升:
	Vue2中无论元素是否参与更新,每次都会重新创建,然后渲染。
	Vue3中对于不参与更新的元素,会做静态提升,只会创建一次,在渲染时直接复用即可。
3.事件侦听器缓存
    默认情况下onClick会被视为动态绑定,所以每次都会去追踪它的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来服用即可
4.ssr渲染
    当有大量静态的内容时候,这些内容会被当做纯字符串推进医改buffer里面,即使存在动态的绑定,会通过模板插值嵌入进去。这样会比通过虚拟dom来渲染的快上很多很多。
    当静态内容大到一定量级时候,会用_createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后 根据对象渲染。

二、什么是按需引入,这个没什么好多说的,为什么说体积变小了,当你们去创建Vue3.0项目的时候就能够感受到了(使用Vue3.0特定定制的创建项目的工具Vite)!

什么是Vite?

Vite是Vue作者开发的一款意图取代webpack的工具,其实现原理是利用ES6的import会发送请求去加载大文件的特性,拦截这些请求,做一些预编译,省去webpack 冗长的打包时间。

具体使用Vite创建项目方法

预知后续Vue3.0的优势,客官稍稍休息,等待下回合讲解,别忘了您的好评和爱心!