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的发布。当然喽,他这些优化思想对于我后边的编程之路肯定会有很大帮助的,也希望我这整理的笔录能够对看过此篇的你有所帮助