尤雨溪分享Vue3最新进展▶️

第二届VueConf 于2018年11月24在杭州举行。Vue的作者——尤雨溪远程参与并做了大会的第一个演讲。以下内容节选至尤雨溪的演讲视频。

Vue 3.0 会带来什么？

更快

在Vue 3.0中，将对于Virtual DOM进行重构。针对性能进行了优化，使得初始渲染/更新提速达100%

更多编译时的优化以减少运行时的开销。

在原有的Virtual DOM更新机制中，模板中其实会不包含一些根本不会跟更新的地方，而这些地方也会被Virtual DOM重新生成节点再进行比对，造成了不必要的性能开销。而在Vue 3.0中会在编译阶段进行模板分析，来减少运行时的开销。

优化Slots生成

在Vue 2.x中，组件的slot更新时，slot的父组件必须要先更新然后在变化后的slot内容传递给子组件，这样造成了不要有的性能开销。如上图中，hello变更时<Comp>组件必须先更新，然后在hello的内容传入内部。

而在Vue 3.0中，会将Slot的依赖关系解耦，创建scope slot，最终Vue会得到一个非常精确的组件级的依赖收集，进一步的避免不必要的组件渲染。

基于Proxy的新数据监听系统

基于Proxy重新建立数据监听后，可以对于数据的增添和删除也做监听，同时也包括数组的index删除、Map、Set等数据变更的监听。又因为抛弃了原有的Object.defineProperty，所以在实例生成中会节省大量的时间。

从此之外，Vue3.0 还做了如：静态内容提取、内联事件函数提取等优化。

最终效果：

更小

Vue 3.0更好的兼容Tree-shaking。在Vue 2.x中，所有方法都是挂在Vue全局对象上的，Tree-Shaking无法剔除不必要的代码。但是在Vue 3.0中，会将一些不常用的功能会以“按需加载”的方式引入，如keep-alive、transition。这样后，核心代码由原来的20KB变为10KB。

更易于维护

Vue 3.0已经全部迁移为TypeScript，便于阅读源码，IDE解析和提示更方便。

内部模块解耦

从上图中可以看出，如监听的数据的observer已经拆分出来，独立运行和维护。

除此之外，Vue 3.0还做了如编译器重构等优化。

更好的多端渲染支持

目前市面上前端环境太多，如Weex、Flutter、还有目前很多的小程序。大家都希望通过写一次Vue代码，可以在多端运行，终极目标——Learn Once，Run everywhere

新功能

自定义渲染接口

Vue 3.0将引入全新的Custom Render API，将DOM操作的权利提供给Custom Render API。这样渲染过程可以自行根据环境来定义。

Observable API 让数据共享更轻松

除此在外，Vue3.0还提供了Event Trigger、更好的TS支持包括Class API和TSX等等优化。

Hooks API

React中的hooks完爆了mixins，Vue会参考并依照Vue使用者的习惯来开发自己的hooks，以取代mixin。

Time Slicing Support

会将JS的执行按照以16ms为一帧来执行，从而指数级的提高前端性能。

最后

Vue 3.0会在明年中旬发布，希望大家不要等得太着急。