vue3.0 到底提升了什么？（值得收藏）

vue3.0 整个重写了一遍。

主要改进

一.大幅提升运行时的性能：重写虚拟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开发也是尽量的保证相应的提示。

四.便利性改进方便程序员使用的

1.Fragment：模板更简单。

之前的vue template的最外层必须要有且只有一个节点，而vue3可以不需要，它用到一个虚拟的父级，满足框架需求，同时程序员想咋写就咋写。

//vue2 需要编译出一个根节点
<template>
	<div>
		<span>aaa</span> 
		<span>{{b}}</span>
		<span>bbb</span>
	</div>
</template>

vue3虚拟的父级Fragment
<template>
	<span>aaa</span> 
	<span>{{b}}</span>
	<span>bbb</span>
</template>

<template>
	这样也行
</template>
多少标签怎么折腾都行。

2.Teleport：布局更加灵活

可以把组件内部的某一块东西放到别的地方去。

<template>
	<span>aaa</span> 
	<span>{{b}}</span> 可以这东西拿到别的地方去使用
	<span>bbb</span>
</template>

3.Suspense：强大的异步组件。

对于大型的项目不可能打到一个包里，之前vue2可以import()加载，但是以前我们的组件本身是无法适应分包加载需求的，而Suspense等于把组件本身变成了一个异步的。为什么要变成异步的，因为组件之间是相护依赖的，有可能组件a加载的很快，但是它里面还用到了别的异步组件，这就造成这个可以显示了但是数据还没来这样会给用户显示个空白屏，我们的解决也是加loding解决，但这种只是修补方式，而我现在就需要都加载完了才能出来，这个时候就要用到异步加载。（这个时候会对整颗加载树监测，会看所有的promise是不是都是reslove如果是就显示，如果不是就等会），Suspense对于之前的异步是一个补充，更加的强大。

4.composition-api：逻辑重用

普通的vue组件重用的都是布局（虽然里面也有逻辑）但是如果只是单纯的重用逻辑，（以前是封成一些函数，但是用起来不方便，要在所有用到的地方都加载）composition-api可以把你的逻辑，各种数据，代码等全都混到这个组件里。vue2里有个mixin但是容易把组件搞乱。composition-api是一种更温柔的方式，放进去还不影响原来的东西。

5.生态圈改进

选择一种语言或者库的时候其实就是在选择一它背后的生态圈。
vue3改进相关的配套也就升级了
vue-router@next版
vuex@next版
vue-cli-plugin-vue-next 生成vue3的cli工具
test-uitils@next
DevTools vite(服务器工具，可以客户端import)

最后vue2还是可以用，之前用的挺好以后接着用。
vue2.6会升级vue2.7融入一部分vue3功能。

说明：本文根据blue老师的教程得出，在学习过程中认为很好，觉得很有用所以加以总结，愿大家都可以了解到。