Vue.js 3.0 新特性预览

 

Evan You(尤雨溪)(2018年11月16日)前几日的早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。浏览器

利用现代浏览器支持的新功能,Vue 3 将成为咱们已经了解和喜好的 Vue.js 强大的的改进版本。框架

咱们作了一些笔记并将其与下面的幻灯片结合起来分享给你们。编辑器

 

总结起来,Vue 3 如下方面值得咱们期待 :ide

  • 更快模块化

  • 更小性能

  • 更易于维护优化

  • 更多的原生支持google

  • 更易于开发使用编码

 

完整的PPT:
https://docs.google.com/presentation/d/1yhPGyhQrJcpJI2ZFvBme3pGKaGNiLi709c37svivv0o/edit#slide=id.p调试

 

Evan 和 Vue 团队的目标是尽量顺利地过渡到 Vue 3 ,在这个过程当中,这些变化在无形地改善了框架。

让 Vue 更快

虽然 Vue 已经很是快了,但 Evan 认为 Vue 3 会更快。如何作到呢…

 

重写虚拟DOM (Virtual DOM Rewrite)

随着虚拟 DOM 重写,咱们能够期待更多的 编译时(compile-time)提示来减小 运行时(runtime)开销。重写将包括更有效的代码来建立虚拟节点。

 

 

优化插槽生成(Optimized Slots Generation)

在当前的 Vue 版本中,当父组件从新渲染时,其子组件也必须从新渲染(11月20日更新:这句话是不严谨的,很是容易产生误导,我以为有必要说明一下: 2.0 组件的从新渲染就是组件粒度的,除非修改的数据是子组件的 props,才会触发子组件的从新渲染。

引用自:


https://juejin.im/pin/5bf28ddd6fb9a056783705fc

 

使用 Vue 3 ,能够单独从新渲染父组件和子组件。

 

 

静态树提高(Static Tree Hoisting)

使用静态树提高,这意味着 Vue 3 的编译器将可以检测到什么是静态组件,而后将其提高,从而下降了渲染成本。它将可以跳过未整个树结构打补丁的过程。

 

 

静态属性提高(Static Props Hoisting)

此外,咱们能够期待静态属性提高,其中 Vue 3 将跳过不会改变节点的打补丁过程。

 

 

基于 Proxy 的观察者机制

目前,Vue 的反应系统是使用 Object.defineProperty 的 getter 和 setter。

 可是,Vue 3 将使用 ES2015 Proxy 做为其观察者机制。 这消除了之前存在的警告,使速度加倍,并节省了一半的内存开销。

为了继续支持 IE11,Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。

 

使 Vue 更小

Vue已经很是小了,在运行时(runtime)压缩后大约 20kb 。 但咱们能够期待它会变得更加小,新的核心运行时压缩后大概 10kb 。 这将在很大程度上经过消除不使用的库(也称为Tree Shaking)来实现。 例如,若是您没有使用 过渡(transition)元素,则不会包含它。

下面您能够看到 hello world 应用程序与压缩后的大小的比较。

 

 

使其更具可维护性

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

 

更多的原生支持

运行时内核也将与平台无关,使得 Vue 能够更容易地与任何平台(例如Web,iOS或Android)一块儿使用。

更易于开发使用

Observer 模块已被解压缩到本身的包中,容许您以新的方式使用它:

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

Vue 3.0 还会改进对 TypeScript 的支持,容许在编辑器中进行高级的类型检查和有用的错误和警告。

 

 

实验性的 Hooks API

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

 

实验性的 Time Slicing 支持

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

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

 

 

小结

很高兴能看到 Vue 更具竞争力,模块化,更容易调试和更多的开发乐趣。

 另外上面说的这些内容除了“明年晚些时候”以外,尚未一个明确的发布日期哦

看来你们还能缓一阵子啦~~