主要改进
一.大幅提升运行时的性能:重写虚拟dom,效果提升30%~300%
在web的操作中所有的操作里面最慢的就是dom操作,(也就是对html元素操作)dom操作要比加减乘除赋值这些操作慢几千倍。所以如果降低了dom操作的时间,那么整体性能就会有质的飞跃。虚拟dom会帮我们优化dom操作,如果不用虚拟dom自己操作的话,可能会把所有的dom都遍历一遍,然后找到,改值的等等一系列的,会导致所有dom都被影响。而用了虚拟dom相当于在背后替你做了个优化,diff(现代视图层常用的算法)它能帮你监测到底哪些节点真的变了哪些没变,然后去做重新渲染的操作。
核心思想:
跳过静态节点,只处理动态节点。而静态节点渲染一次就不管了,所以处理的数据量会有一个巨大的下降,从而提升巨大性能。
例: <template> <div> <span>aaa</span> //静态节点 <span>{{b}}</span> //动态节点 <span>bbb</span> //静态节点 </div> </template> <script> export default { data(){ return { a:123 } } } </script>
二.提升网络性能:tree-shaking机制
tree:依赖树,所有的依赖(import)都是tree的节点,有一个问题就是你引入的树可能会有大量的功能而你所使用的可能就是其中的一两项功能。但是程序不知道,所以在打包时候会把整个库都打包给你。
shaking:通过代码反向监测那些特性被用到,因此会决定打包的时候会打包那些。
import play from 'play' play.show()
假设引入了play库,它里面有很多操作但是你只用到了show操作,在这种情况下就可以监测出来,所以就把show打进来,当然还包括这个show的依赖,这时候会减掉大量的没必要的东西。一句话理解就是只打包必要的依赖项。
当然你可以主动去优化,比如分包加载,换一些更小的包等等…但是这并不是最好的解决方法,因为你用了vue这个框架,这个框架本身就很大,所以vue3就主动采用了tree-shaking从根本上把vue给缩小了。(当然这不是vue首创,几乎所有的编译工具都有这个机制比如webpack)
三.完全typescript支持
为什么要用ts:因为ts强大的类型系统,类型提示,大型应用必备。
vue3支持情况:完全ts重写。但并不是之前js写的要改ts。就算是用js开发也是尽量的保证相应的提示。