阅读不怎么舒适,参看我的语雀原文: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的兼容性,保证用户平滑升级