vue-next
计划并已实现的主要架构改进和性能优化:(以下是从vue3官网视频介绍梳理)
-
跟vue2.0同样的大小(Global API TreeShaking),更多功能;
-
重写Vitual Dom,优化vue diff算法,提升render速度;
-
更激进的 static tree hoisting 功能
由于新的虚拟 DOM 实现所带来的提升,我们可以执行一些更加高效的编译耗时优化,如静态树提升(static tree hoisting)、静态属性提升(static props hoisting);以及为运行时提供一些来自编译器的提示,以此避开子组件的规范过程 (children normalization);提供 VNode 快速创建路径; 等等。
- 支持 Source map
对解析器进行重写,以便在对模板进行编译发生错误时,可以提供错误发生的位置信息;除此之外还可以带来对模板的 source map 支持;还可以支持第三方工具如 eslint-plugin-vue 和 IDE 的语言服务 (language services) 特性。
- 移除 source map 和标识符前缀功能后,使用 Brotli 压缩的浏览器版本精简了大约 10KB
运行时(Runtime)的更新主要体现在以下几个方面:
-
速度显著提升
-
同时支持 Composition API 和 Options API
-
基于 Proxy 实现的数据变更检测
-
支持 Fragments
-
支持 Portals
-
支持 Suspense w/ async setup()
目前不支持IE11(原因:Proxy不支持IE11及以下版本)
下面我会参考Evan You之前的介绍和Vue 3.0 Updates演讲中的内容,稍详细介绍下vue3的这些改动,改动的原因和达到的效果;
尤雨溪的Vue 3.0 Updates演讲ppt地址中有些地方已经改变;
比如:effect
改为watchEffect
,reactive替换observeable
最大的变动:composition Function;
这里推荐看下尤雨溪的:Vue Function-based RFC
参考文档: