Vue.js 3.0发布更新计划

时间  2019-11-06 标签 vue.js vue js 3.0 3 0 发布 更新 计划

在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲，对 Vue 3.0 的更新计划、方向进行了详细阐述。目前该演讲的 PPT 也已上传至 Google 文档，感兴趣的可点此查阅。本次版本主要围绕如下几个版原本升级：vue

  • 更快
  • 更小
  • 更易于维护
  • 更多的原生支持
  • 更易于开发使用
  • ...

在这里插入图片描述
完整的ppt地址：https://link.juejin.im/?targe...react

更快

  • Virtual DOM 彻底重写，mounting & patching 提速 100% ；
  • 更多编译时（compile-time）提醒以减小 runtime 开销；
  • 基于 Proxy 观察者机制以知足全语言覆盖及更好的性能；
  • 放弃 Object.defineProperty ，使用更快的原生 Proxy ；
  • 组件实例初始化速度提升 100％ ；
  • 提速一倍/内存使用下降一半。

为了让Vue 3.0更快，Vue开发小组作了以下的一些改进：浏览器

重写虚拟DOM (Virtual DOM Rewrite)

随着虚拟 DOM 重写，咱们能够期待更多的 编译时（compile-time）提示来减小 运行时（runtime）开销。
在这里插入图片描述编辑器

优化插槽生成(Optimized Slots Generation)

在当前的 Vue 版本中，当父组件从新渲染时，其子组件也必须从新渲染。 使用 Vue 3 ，能够单独从新渲染父组件和子组件。
在这里插入图片描述ide

静态树提高(Static Tree Hoisting)

使用静态树提高，这意味着 Vue 3 的编译器将可以检测到什么是静态组件，而后将其提高，从而下降了渲染成本。
在这里插入图片描述模块化

静态属性提高（Static Props Hoisting）

此外，静态属性的提高， Vue 3 将跳过不会改变节点的打补丁过程。
在这里插入图片描述post

基于 Proxy 的观察者机制

目前，Vue 的反应系统是使用 ObectDefineProperty 的 getter 和 setter。 可是，Vue 3 将使用 ES2015 Proxy 做为其观察者机制。 这消除了之前存在的警告，使速度加倍，并节省了一半的内存开销。
在这里插入图片描述性能

更小

  • Tree-shaking 更友好；
  • 新的 core runtime: ~10kb gzipped

在这里插入图片描述
Vue已经很是小了，在运行时（runtime）压缩后大约 20kb 。 但咱们能够期待它会变得更加小，新的核心运行时压缩后大概 10kb 。 这将在很大程度上经过消除不使用的库(也称为Tree Shaking)来实现。优化

更易维护

  • Flow -> TypeScript
  • Decoupled Packages（解耦包）
  • 编译器重写

在这里插入图片描述
虽然大多数 Vue 开发人员都没有在库自己上工做，但很高兴知道 Vue 3 将带来更多可维护的源代码。 它不只会使用 TypeScript ，并且许多软件包将被解耦，使全部内容更加模块化。google

更多的原生支持

运行时内核也将与平台无关，使得 Vue 能够更容易地与任何平台（例如Web，iOS或Android）一块儿使用，从而更好的支持跨平台开发。
在这里插入图片描述

让开发者使用更轻松

  • Exposed reactivity API
  • 轻松识别组件从新渲染的缘由
  • 改进 TypeScript 以支持 w/TSX
  • 改进警告追踪
  • Experimental Hooks API
  • Experimental Time Slicing Support
  • 支持 IE11

Exposed reactivity API

Observer 模块已被解压缩到本身的包中，容许您以新的方式使用它。
在这里插入图片描述

轻松识别组件从新渲染的缘由

跟踪从新渲染的位置也会更容易。 在 Evan 的演讲中，他作了一些实时编码，并展现了如何跟踪 Vue 应用程序（使用下面的代码）来找出触发组件从新渲染的内容。 这在更大的应用程序和性能微调中很是有用。
在这里插入图片描述

改进 TypeScript 以支持 w/TSX

Vue 3.0 还会改进对 TypeScript 的支持，容许在编辑器中进行高级的类型检查和有用的错误和警告。
在这里插入图片描述

实验性的 Hooks API

当咱们须要在 Vue 中共享两个组件之间的行为时，咱们一般使用 Mixins 。然而，Evan 正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题，而且更适合使用惯用的 Vue 代码。

实验性的 Time Slicing 支持

当您有许多组件同时尝试从新渲染时，任何浏览器均可以开始变得很慢，从而使用户体验降低。

Evan展现了他如未尝试使用 Time Slicing，将 JS 的执行分解为几个部分，若是有用户交互须要处理，这些部分将提供给浏览器。
在这里插入图片描述

不得不说，Vue.js 3.0版本将发生质的变化，继续朝着更快、更小、 更易于管理和更利于开发者的目标前进，而且部分借鉴了React的相关思想，正所谓“变便是不变”。

参考：英文原文

Vue.js 3.0 PPT

联系我们 沪ICP备2021010478号-7