vue2即彪、vue3與react中三者diff算法有什么不同?

1:什么是diff算法?

所謂的diff算法就是數(shù)據(jù)更新后供鸠,生成新的虛擬DOM豫柬,新的v-node與舊的v-node進行對比,找出不同的區(qū)別進行操作桥温,生成新的DOM的過程引矩。

2、diff算法的優(yōu)化方案:

如果按照常規(guī)的算法比較侵浸,將兩個tree結(jié)構(gòu)進行比較旺韭,那時間復雜度很高的,采用了diff算法會讓時間復雜度從O(n3)減少到O(n)掏觉,diff算法從下面3點中進行了優(yōu)化:
(1)只比較同一層区端,不跨級比較
(2)tag不同則刪掉重建(不在比較內(nèi)部的細節(jié))
(3)子節(jié)點通過key來區(qū)分(key的重要性)

3、React中diff算法 —僅右移

比如下圖中的所示:
o(node)中的數(shù)據(jù)內(nèi)容:a-b-c-d-e
n(node)中的數(shù)據(jù)內(nèi)容:b-c-a-d-e

第一步:o(node)中的a與n(node)中的b比較發(fā)現(xiàn)內(nèi)容不相同澳腹,同理不動织盼。


React中diff算法.png

第二步:o(node)中的b與n(node)中的c比較發(fā)現(xiàn)內(nèi)容不相同,同理不動遵湖。


React中diff算法.png

第三步:o(node)中的a與n(node)中的a比較發(fā)現(xiàn)內(nèi)容相同悔政,o(node)中的a向右移動到c后面,這樣就完成了diff算法的整個過程延旧。


React中diff算法.png
React中diff算法.jpg
4谋国、Vue2中diff算法 —雙端比較
vue2雙端比較.png

vue2中diff算法定義四個指針:oldStartIdx、oldEndIdx迁沫、newStartIdx芦瘾、newEndIdx捌蚊。

讓oldStartIdx與newStartIdx、oldStartIdx與newEndIdx近弟、oldEndIdx與newEndIdx缅糟、oldEndIdx與newStartIdx兩兩進行比較,然后 oldStartIdx祷愉、oldEndIdx與newStartIdx窗宦、newEndIdx都分別向中間移動,在進行比較直到到達中間二鳄。

5赴涵、Vue3中diff算法 —最長遞增子序列

如下圖中的兩個序列:


vue3最長遞增子序列.png

首先看o(node)與n(node)左邊的兩列都是A,B都相同,不用管订讼,右側(cè)末尾都是G都相同也不用管髓窜。
看兩列中間部分:將n(node)中順序不同的元素,按照o(node)的次序用數(shù)組標示出來,n(node)中跟上面不同的元素分別是 F C D E H 對應上面的元素數(shù)組分別是[5欺殿、2寄纵、3、4脖苏,-1]程拭,H是新增加的找不到對應的字母,暫時用-1代表帆阳,我們找出來F與H是需要操作的哺壶,其他不用一一調(diào)整屋吨。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蜒谤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子至扰,更是在濱河造成了極大的恐慌鳍徽,老刑警劉巖敢课,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件圾结,死亡現(xiàn)場離奇詭異晌姚,居然都是意外死亡抵恋,警方通過查閱死者的電腦和手機弧关,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門茸习,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人猫胁,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵歌粥,是天一觀的道長。 經(jīng)常有香客問我坷虑,道長迄损,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任账磺,我火速辦了婚禮芹敌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘垮抗。我一直安慰自己氏捞,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布冒版。 她就那樣靜靜地躺著液茎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪辞嗡。 梳的紋絲不亂的頭發(fā)上捆等,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音续室,去河邊找鬼栋烤。 笑死,一個胖子當著我的面吹牛挺狰,可吹牛的內(nèi)容都是我干的明郭。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼丰泊,長吁一口氣:“原來是場噩夢啊……” “哼薯定!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起趁耗,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤沉唠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后苛败,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡径簿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年罢屈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片篇亭。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡缠捌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情曼月,我是刑警寧澤谊却,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站哑芹,受9級特大地震影響炎辨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜聪姿,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一碴萧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧末购,春花似錦破喻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至擎场,卻和暖如春咆繁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背顶籽。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工玩般, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人礼饱。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓坏为,卻偏偏與公主長得像,于是被迫代替她去往敵國和親镊绪。 傳聞我的和親對象是個殘疾皇子匀伏,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容