vue3.0进展笔录

2018.11.24日，Vue.js框架作者尤雨溪在杭州VueConf讲述了vue3.0的进展。这里我简单的整理了他的笔录

vue3.0主要围绕以下五点：

1、更快

2、更小

3、更易于维护

4、更好的多端渲染支持

5、增添新的功能

接下来慢慢描述前面四个点

一、更快：

如何让vue运行得更快呢？vue3对virtual DOM进行了重构，它在代码编译时进行了更多的分析，而不是说等它运行的时候再一一分析。当然vue3做了很多小的优化

1、在生成virtual DOM时，函数调用形式尽可能的保持一致（即函数参数的个数保持一致），这样更易于JS引擎去优化

2、在模板中直接静态的分析一个元素所包含的子元素类型以及个数。打个比方：在

中，我们可以看到，div有一个孩子节点

,我们可以在生成代码的时候在代码里给运行时留下一些提示，专门一个字段提示子节点个数，此处div子节点只有一个，我们就留个数字1，那么在算法中我们就可以直接去找只有一个子元素的分支，这样就可以跳过很多不必要的分支。当程序规模小的时候这个效果不会很明显，但是当规模较大，量多的时候，这个细节中的优化对于速度提升的效果是非常可观的。

3、优化slots生成：

在vue2中，如果我们要更新slots，那么父子组件两个都必须要更新。 在vue3中，我们将它和scope slot一样统一成为一个lazy函数，只依赖于子组件，那么需要更新时，只需要重新渲染子组件就行。这里可以通过避免不必要的渲染来提升速度。

4、静态内容提取：当我们检测到一部分模板是不会变的，我们就把这一部分直接提取出来。那么在之后的更新中，这部分模板不需要重新生成virtual DOM，也不需要比对。在vue2中对此是有优化过，但是vue2未做的是，当一个元素内部只要有一个动态内容的时候，那么整个元素都无法静态化。vue3在这个点上进行了优化。一个元素中虽然有动态内容，我们仍然可以将那些不变动的属性单独提取出来。

5、内联事件函数提取

6、基于proxy的新数据监听系统：

a）不会监听所有数据，只有当某个数据真正用到的时候，才去监听。

b）避免过多Object.defineProperty的get和set的使用来提升性能。这个会在实例初始化的时候提升了将近一倍的速度。

结合以上所有优化的整合，相比vue2，vue3在速度加倍的同时内存占用减半，这个结果还是非常令人满意的。

二、更小

vue3配合了 Tree-shaking，在编译的时候将没有用到的代码全部扔掉。那么在扔掉之后，得到的尺寸在10kb左右，相比原来的20kb，size也将近减半了。（这里说的比较简单，具体怎样丢掉那些无用的代码呢?vue3的结构进行一定变化的，感兴趣的呢可以去搜索其它资料）

三、更易于维护

1、代码有很大的变动，从Facebook的Flow迁移到TypeScript。其主要原因是TypeScript对于用户和社区这块的支持和维护这一块比较好

2、vue内部模块解耦：这样会让vue结构更清晰直观，利于开发人员解读、修改和维护。比如说我们就只想要修改某个模块，我们直接去修改就好，不用担心我们改了这一块，其它模块也会跟着受到影响。

3、模块编译器重构：主要是将指令v-if、v-for等插件化，便于后期阅读以及bug修复；b、带位置信息的parser

四、更好的多端渲染支持：vue3.0 中提取出了一个核心的 @vue/runtime-core 包，可以使用这个核心包进行开发可运行在小程序中等其他环境中。后边vue可能会在web 、 ios 、 Android等多个平台一起使用。

尤大大短短的36分钟的分享确实非常的精彩，我很期待vue3的发布。当然喽，他这些优化思想对于我后边的编程之路肯定会有很大帮助的，也希望我这整理的笔录能够对看过此篇的你有所帮助

参考视频：https://mp.weixin.qq.com/s?__biz=MzA5NTM2MTEzNw==&mid=2736713929&idx=1&sn=6259e725351afb1c8eadb5331332fc47&chksm=b6aad1d781dd58c1cd541085c71b0f7df9a0b4473ddd6cdc795b75ac631f1922524cc786145e&mpshare=1&scene=23&srcid=0107TtAs65hBVIhJdMEs11Es#rd

参考文章： https://wait-hua.github.io/2018/12/02/vue3.0/