大致了解vue3.0的内容

9.19号vue 3.0发布了！！！
但是正式使用估计还得2021年吧0.0

一.六大亮点

1. 性能比vue2.x快1.2~2倍
2. 支持tree-shaking，按需编译，体积比vue2.x更小
3. 支持组合API
4. 更好的支持TS
5. 更先进的组件

二.性能比vue2.x快1.2~2倍如何实现的呢

1. diff算法

首先在vue2.x中：

是全局比较，先比较div，在比较左p，然后比较右p，好像右p改变，重新渲染

但是在vue3.0中由于左p内容和根节点div是写死的，根本不需要比较，我们需要优化，直接比较右p

在vue3.0中：
在创建虚拟dom中，会根据DOM的的内容会不会发生内容变化，添加静态标记

谁有flag！比较谁

flag不同值代表不同的含义
1：动态文本节点
2：动态class
3：动态style

---------------------------------------------------------------------------------

2. 静态提升

vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染
vue3中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可

3. 事件侦听缓存

默认情况下，onclick为动态绑定，所以每次都会追踪它的变化，但是因为是同一函数，没有必要追踪变化，直接缓存复用即可

在之前会添加静态标记8 会把点击事件当做动态属性 会进行diff算法比较，
但是在事件监听缓存之后就没有静态标记了，就会进行缓存复用

三.为什么vue3.0体积比vue2.x小

在vue3.0中创建vue项目 除了vue-cli，webpack外还有 一种创建方法
是Vite
Vite是作者开发的一款有意取代webpack的工具，其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间

四.vue3.0组合API

1.setup（）函数是组合API的入口函数

（1）定义变量

（2）定义方法

用ref就可以监听到变量的变化了

（3）用这个方法操作对象

发现打印了一个对象

要想达到点击按钮打印count的值得效果，我们必须用count.value


2.利用组合API进行函数式抽离，解决vue2.0业务分散的问题，我们做一个简易的todolist进行演示：

首先声明一点，在上述例子中，我们用ref对基本类型的变量count进行监听，其实文档上说明其也可以对复杂类型就行监听，但是进行区别，我们还是用reactive对复杂类型进行监听

todolist的删除功能如下（此时没有进行函数式抽离）

进行函数式抽离，相同业务集中在一个函数中

相同的思路我们完善一下添加功能

一个简易的todolist就完成了