Vue3.0(vue-next)新特性解析

888 阅读2分钟

vue-next是vue3.0的核心,vue-next 其中的优化主要包括:

vue-next计划并已实现的主要架构改进和性能优化:(以下是从vue3官网视频介绍梳理)

由于新的虚拟 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

参考文档:

vue3.0 diff算法详解(超详细)

尤雨溪:Vue 3.0 计划