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><p></p></div>中，我们可以看到，div有一个孩子节点<p>,我们可以在生成代码的时候在代码里给运行时留下一些提示，专门一个字段提示子节点个数，此处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的发布。当然喽，他这些优化思想对于我后边的编程之路肯定会有很大帮助的，也希望我这整理的笔录能够对看过此篇的你有所帮助
网友评论