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

参考视频: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/

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • 光环的北京,总有那么一群人,令人动容,图中的电力维修人员,外卖哥,拾荒者,等等。希望自己的每一张照片都有一个故事,...
    小火耳阅读 192评论 2 1
  • 存货:日常活动中持有以备出售的产成品或商品、处在生产过程中的在产品,在生产过程中,在生产过程中或者提供劳务过程中耗...
    e907b7e8c470阅读 127评论 0 0
  • 三种主题阅读的方式一“碎弹”“爆破弹”“核弹”。“碎弹”就是碎片化的主题阅读,“爆破弹”就是书籍式主题阅读,而”核...
    晓祎琴阅读 440评论 0 0
  • 一、龙眼糜 糜即粥也,龙眼糜就是龙眼粥,只不过泉州人把粥说成糜,古人也有粥糜之说,毕竟闽南话保留了很多老祖宗的语言...
    草草啖盐说蜜阅读 636评论 6 4
  • 《爱的艺术》:1956年出版至今已经被翻译成32种文字 作者:[美]艾.弗洛姆,美国著名心理学家、哲学家、法兰克福...
    朱家晓晓阅读 271评论 0 0