vue3 & vue2

vue3.0是如何变快的?

diff算法优化

  • vue2的虚拟dom是进行全局的对比。
  • vue3 新增了静态标记(patchFlag)
在与上次虚拟节点进行比较的时候,只对比带有patch Flag的节点,并且可以通过flag的信息得知当前节点要对比的具体内容。

hoistStatic 静态提升

vue2中无论元素是否参与更新,每次都会被重新创建。
vue3对于不参与更新的元素,只会被创建一次,之后在每次选人时候被不停的复用

cacheHandlers 时间侦听缓存

默认情况下onclick 会被视为动态绑定,所以每次都会去追踪它的变化。
但是因为是同一个函数,没有必要追踪变化,直接缓存起来复用即可。

componsition API & option API 混合使用。

本质将compositon API的方法和数据注入到option API中


pic1.png

vue3的ref

  • ref 与reactive一样 ,都是实现响应式数据的方法。
  • 由于reactive必须传递一个对象,所以导致在企业开发中,如果我们只想让某个变量实现响应式的时候变得非常麻烦。所以vue3提供了ref方法,实现简单的数据监听。
  • ref本质:
    ref的本质还是reactive,系统会自动根据传入的值将他转换成ref(xx)-->reactive({value:xx})。
  • 验证:打印ref的值,可以发现会有一个私有属_isRef:true.
  • ref注意点:
  • 在Vue中使用的ref值不用通过value获取。
  • 在js中使用的ref值必须通过value获取。

vue3的reactive

  • reactive是vue3中提供的响应数据的方法。
  • vue3中是通过proxy实现的,vue2中是通过defineProperty实现。
  • reacttive注意点:
    • reactive的参数必须是对象(json或arr)
    • 如果给reactive传递了其他对象
      +默认情况下回修改对象,界面不会自动更新。
      +如果想更新,可以通过重新赋值的方式。

setup执行时机

  • setup-->beforeCreated -->created
    settup注意点:由于在setup函数中,还没有执行created生命周期。所以在这个周期是不能是用data和methods的。
  • vue为了避免我们错误的使用,所以直接将setup函数中的this改为undefind.
  • setup函数是同步,不支持异步的。


    pic2.png

递归监听

  • 默认情况下,无论是ref还是reactive都是递归监听。
  • 存在的问题:如果数据非常大,则会非常消耗性能。

非递归监听

  • shallowRef shallowReactive
  • 注意点:如果使用shallowRef创建的数据,那么vue监听的是.value的变化,并不是第一层的变化。
  • triggerRef
    -注意点:vue只提供了triggerRef的主动更新,并没有提供triggerReactive的主动
    更新方法,如果是reactive类型的数据,则无法主动出发更新的。

递归监听&非递归监听使用场景。

  • 一般情况下使用递归监听就可以了,当时在数据量比较大的时候,才需要使用shallowRef shallowReactive 。

shallowRef的本质

  • shallowRef的本质就是shallowReactive,所以通过shallowRef创建的数据,实际上监听的是value的变化。

toRaw方法

  • 从ref或者relative中的到原始的数据或引用对象。
  • 说明:reactive&ref类型的特点。
    每次修改都会被更新,都会导致Ui界面的更新。这样是非常消耗性能的,但是有一些操作我们并不需要更新界面,这个时候可以通过toRaw拿到原始数据,对原始数据进行修改,就避免了更新UI界面.

markRaw方法

使用该方法就是告诉vue当前数据永远不要被追踪。

ref&toRef的比较

  • ref (本质复制了原始数据) 如果通过ref将某一个对象中的属性变为响应式的数据,我们修改响应式数据是不会影响原始数据的。
  • toRef (本质是引用了原始数据) 如果通过ref将某一个对象中的属性变为响应式的数据,我们修改响应式数据会影响原始数据的。但是如果响应式的数据是通过toref创建的,是不会触发UI界面的更新,
ref--->复制数据 不影响原始数据 UI更新
toRef---> 引用数据  会影响原始数据 UI不更新

customRef

  • 返回一个ref对象,可以显示的控制依赖追踪和触发响应。


    1600999867950.jpg
  • 应用场景 可以使用自定义ref解决。


    WX20200925-103307@2x.png

注明:以上本人学习笔记,有误的地方欢迎指正。共同学习,一起进步。

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