Vue3简介
2020年7月18日，尤大大公布了VUE 3 RFC的发布RFC即预发布版。这意味着 Vue3 内核的 API 和实现已到稳定状态，在最终版本发布前，不会提出新功能或者做重大更改。
Vue3新特征
完全重写虚拟DOM和优化渲染
从图中可以看出，与Vue 2.5中的测试相比，执行脚本所需的时间少了一半，并且所用的内存也少了一半。
为了实现这一目标，Vue的团队依赖于以下条件：
优化了插槽的生成，以避免不必要地重新渲染子组件。
如果一个组件中有静态和动态节点，则仅动态节点被更新，从而避免了整个树的更新。
如果组件具有静态模板，但内容是动态的，那么现在仅动态内容被更新，从而避免了组件本身的更新。
如果组件具有内联处理程序，则该函数的身份发生更改时，它将避免重新渲染。
内核越来越小
Vue一直很小，它的运行时大小约为23KB。对于Vue 3，您可以在其中排除未使用的代码，从而减小尺寸。
大多数全局API已移至ES模块。这样，像webpack这样的现代捆绑器就可以分析依赖关系，并且不包括尚未导入的代码。
基于这些更改，Vue 3内核的大小缩小到约为10KB。
合成API和Vue Drama
我们拥有所谓的Composition API，它为框架的发展奠定了基础。在Vue 3中，Composition API无需通过指定一长串选项（Options API）来定义组件，而是能够像编写函数一样编写和重用组件。
性能提升
1. 响应式系统提升vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。
vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
优势：
可以监听动态新增的属性；
可以监听删除的属性 ；
可以监听数组的索引和 length 属性；
2. 编译优化
优化编译和重写虚拟dom，让首次渲染和更新dom性能有更大的提升
vue2 通过标记静态根节点,优化 diff 算法
vue3 标记和提升所有静态根节点,diff 的时候只比较动态节点内容
Fragments, 模板里面不用创建唯一根节点,可以直接放同级标签和文本内容
静态提升
patch flag, 跳过静态节点,直接对比动态节点
缓存事件处理函数
3. 源码体积的优化
vue3移除了一些不常用的api，例如：inline-template、filter等
使用tree-shaking
采用API区别
Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？Options Api
包含一个描述组件选项（data、methods、props等）的对象 options；
API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项 ；
使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；
composition Api
vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。
解决options api在大型项目中，options api不好拆分和重用的问题。
编译方面优化
vue.js 3.x中标记和提升所有的静态节点，diff的时候只需要对比动态节点内容；Fragments（升级vetur插件): template中不需要唯一根节点，可以直接放文本或者同级标签
静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点，随着每次的渲染被不停的复用。
patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历，提高了虚拟dom diff的性能。
缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数
tree shaking 通过摇树优化核心库体积,减少不必要的代码量
响应式系统原理
1. reactive设置对象为响应式对象。接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理。
创建拦截器handerler，设置get/set/deleteproperty。
get
收集依赖（track）；
如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty；
如果当前的 key 的值不是对象，则返回当前 key 的值。
set
设置的新值和老值不相等时，更新为新值，并触发更新（trigger）。
deleteProperty
当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger）。
2. effect
接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖
3. track
接收两个参数：target 和 key
－如果没有 activeEffect，则说明没有创建 effect 依赖
－如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性
－WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
－WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
－depsMap 中没有 key 属性，则 set(key, (dep = new Set()))
－depsMap 中有 key 属性，则添加这个 activeEffect
４.trigger
判断 WeakMap 中是否有 target 属性，WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()。