Vue3.0简介

阅读不怎么舒适，参看我的语雀原文：https://www.yuque.com/xiaocao-4xvac/zxcdyp/qepwd0

更快，初始渲染/更新最高可提速一倍

1.virtual dom实现完全重构

2.结合模板编译提高运行时性能。减少运行时开销

例如：模板里很多没有变动的地方，但是virtual dom 不可避免的生成节点对它们进行比对。可以通过在编译时对模板进行分析，来减少这些运行时的开销

3. component fast path

模板编译为virtual dom的渲染函数时，2.0不管原生元素还是组件都是统一作为字符串传入创建虚拟node的函数中去，判断元素是是组件还是原生元素时是运行时做的。3.0给明确的区别 component fast path

4.尽可能生成所谓的monomorphics calls

生成VNode的时候，函数调用尽可能保持形状一致，也就是有同样个数的参数。这样是我们生成的代码更易于被js引擎去优化

5.在生成渲染函数时运行时留下一些hint

模板中直接静态分析一个元素所包含的子元素的类型，在生成渲染函数时运行时留下一些hint。像元素类型，子元素个数

6.优化slots生成

把所有的slot都跟scope slot一样统一生成为一个函数，可以lazy的一个函数。函数传给子组件，由子组件决定什么时候调用这个函数。当子组件调用函数的时候，函数的依赖就成为了子组件的而不是父组件的，当函数变动的时候就只需要重新渲染子组件，子组件与父组件的依赖分离，得到非常精确的组件级依赖搜集，避免不必要的组件更新。不存在需要需要手动优化组件更新的问题

7.静态内容提取

2.x已实现不会变的模板直接提取出来，之后的更新中直接复用，在VNode比对时直接跳过。但是当模板中任意元素包含任意动态内容时，整个元素无法被静态化

3.0元素本身的静态属性，如果data也是一致的，那么整个元素就是一样的。在比对的时候就可以跳过该元素，比对子节点就可以了

8.内联函数提取

cache内联函数

9.基于Proxy的新数据监听系统

基于proxy即所谓的lazy by default，只有当一个数据被用到的时候才会去监听它

利用Proxy减少组件实例初始化开销

更小

调整代码结构使其可以和Tree-shaking配合起来，没有用到的代码在编译时扔掉

通过按需引入工具函数来实现，例：

更易于维护

1.TypeScript重写vue3

主要是针对vue开发团队来讲，vue3代码从flow迁移到TypeScript.完全用ts重写了代码，typescript对社区维护和支持更好一些

2.内部模块解耦，利于用户进行源码的解读

3.编译器重构

更好的多端渲染支持

虽然vue2已经支持，但是需要开发者去fork Vue的源码来实现这些功能，vue3会引入Custom Render API来解决这个问题。

新功能

响应式数据监听API

通过引入observable和effect手动创建显示的响应式对象

轻松排查组件更新的触发原因

提供renderTriggered功能来检测

更好的TypeScript支持

包括原生的Class API 和TSX

更好的警告信息

Experimental Hooks API

一种逻辑复用机制，大概率取代mixins

Time Slicing Support

能够使框架在进行js计算的时候，把js计算切成一块一块，一帧一帧的进行，解决框架导致的一些性能问题：

在浏览器的主线程里面进行大量的js操作，会使整个主线程被block,导致浏览器处于无响应状态，用户无法进行后续操作。

一种可以改进这个问题的方法是：可以通过每16ms计算之后，把yield给browser,让后续操作能进入事件队列，然后触发更新，也会取消之前不必要的更新。例如模糊搜索，在用户输入比较快的情况下能减少请求数并能够较快响应

关于IE

会有一个专门的版本，降级为旧的getter/setter机制，并对IE中不支持的用法给出警告

在更新的基础上会尽可能保证对2.0的兼容性，保证用户平滑升级