vue3.0有哪些变化?

 ** 发展历程**

vue.js1.x-----vue.js2.x 引入了虚拟DOM

vue.js2.x问题

1)源码自身的维护性

数据量大后带来的渲染和更新的性能问题

2)兼容性

想舍弃但为了兼容一直保留的鸡肋API


 **vue3.0的优化**

1)首先是源码优化,vue.js框架本身的优化

目的是让代码更易于开发和维护

源码的优化主要体现在使用monorepo和typescript管理和开发源码,这样做的目标是提升自身代码的可维护性

vue.js2.x如上图所示


vue.js3如上图所示

相对于vue.js2.x的源码组织方式,monorepo把这些模块拆分到不同的package中,每个package有各自的API,类型定义和测试,这样使得模块拆分更细化,职责划分更明确,模块之间的依赖关系也更加明确,开发人员也更容易阅读,理解和更改所有模块源码,提高代码的可维护性。

package(比如reactivity响应库)是可以独立于vue.js使用,这样用户如果只想要使用vue.js的响应式能力,可单独依赖这个响应式库而不用去依赖整个vue.js,减少了引用包的体积大小,而vue.js2.x是做不到这一点的


源码编写语言:vue.js1.x原生开发,vue.js2.x使用flow,vue.js3.x使用typescript


 2)性能优化

源码体积的优化,移除一些冷门的feature,引入tree-shaking技术

数据劫持优化,当数据改变后,为了自动更新DOM,那么就必须劫持数据的更新,也就是说当数据发生改变后能自动执行一些代码去更新DOM

通过object.defineProperty这个API的劫持数据的getter和setter,必须知道拦截的key是什么,嵌套层级比较深的对象、

vue3.0使用proxy api劫持整个对象,注意⚠️proxy api并不能监听到内部深层次对象的变化,因此,vue3.0的处理方式是在getter中去递归响应式,这样的好处是真正访问内部对象才会变成响应式,而不是无脑递归,无疑在很大程度上提升了性能

 3)编译优化

通过在编译阶段优化编译的结果,实现运行时patch过程的优化

通过编译阶段对静态模版的分析,编译生成了block tree

block tree是一个将模版基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的,每个区块只需要以一个Array来追踪自身包含的动态节点

借助block tree,vue.js将vnode更新性能由与模版整体大小相关提升为与动态内容的数量相关

 4)优化逻辑组织

vue.js1.x vue.js2.x 编写组件本质就是在编写一个包含了描述组件选项的对象,我们称它为options API


options api按照methods,computed,data,props这些不同的选项分类,组件小的时候,这种方式一目了然,但大型组件,一个组件可能有多个逻辑关注点,当使用options api的时候,每个关注点都有自己的options

vue.js3.0提供了新的api:compsositon api,就是将某个逻辑的关注点相关的代码都全部放进一个函数里,这样当需要修改一个功能时,就不需要在文件夹中跳来跳去

5)优化逻辑复用

vue.js 2.x mixin

首先每个mixin都可以定义自己的props,data,他们之间无感,所以很容易定义相同的变量,导致命名冲突

对组件而言,如果模版中使用不在当前组件中定义的变量,那么就会不太容易知道这些变量在哪里定义的,这就是数据来源不清晰

compsositon api解决以上两个问题

除了逻辑复用,也会有更好的类型支持,因为他们都是一些函数,在调用函数时,自然所有类型都推导出来了,不像options api所有东西使用this,compsositon api对tree shaking友好,代码易于压缩

 6)引入RFC:使每个版本改动可控

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