vdom 的 更新

當(dāng) vm 上有屬性改變時(shí),例如 vm.a 由 '111' 改為 '222'纬纪,

  1. a的 set 方法中蚓再,dep.notify() 會(huì)對(duì) 訂閱 a 的 watcher 進(jìn)行更新。

  2. vm 的 watcher 訂閱了 vm 上所有的屬性包各。這是會(huì)通知 watcher 的 get 方法摘仅,
    vm watcher 的 get 方法 就是 updateComponent

updateComponent = function () {
      vm._update(vm._render(), hydrating);
    };
  1. vm._render 重新生成一次 vnode,這個(gè)新的 vnode 就包含了 對(duì) a 的更改髓棋,

  2. _update 調(diào)用 vm.$el = vm.__patch__(prevVnode, vnode); 更新 vnode

  3. patch 方法中會(huì)根據(jù) oldVnode 和 vnode 判斷是需要更新实檀,執(zhí)行 patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly);

  4. patchVnode算法是:

    1. 如果oldVnode跟vnode完全一致惶洲,那么不需要做任何事情
    2. 如果oldVnode跟vnode都是靜態(tài)節(jié)點(diǎn)按声,且具有相同的key,當(dāng)vnode是克隆節(jié)點(diǎn)或是v-once指令控制的節(jié)點(diǎn)時(shí)恬吕,只需要把oldVnode.elm和oldVnode.child都復(fù)制到vnode上签则,也不用再有其他操作
    3. 否則,如果vnode不是文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)
    • 如果oldVnode和vnode都有子節(jié)點(diǎn)铐料,且2方的子節(jié)點(diǎn)不完全一致渐裂,就執(zhí)行更新子節(jié)點(diǎn)的操作(這一部分其實(shí)是在updateChildren函數(shù)中實(shí)現(xiàn)),算法如下

    (1)分別獲取oldVnode和vnode的firstChild钠惩、lastChild柒凉,賦值給oldStartVnode、oldEndVnode篓跛、newStartVnode膝捞、newEndVnode

    (2)如果oldStartVnode和newStartVnode是同一節(jié)點(diǎn),調(diào)用patchVnode進(jìn)行patch愧沟,然后將oldStartVnode和newStartVnode都設(shè)置為下一個(gè)子節(jié)點(diǎn)蔬咬,重復(fù)上述流程

    (3)如果oldEndVnode和newEndVnode是同一節(jié)點(diǎn),調(diào)用patchVnode進(jìn)行patch沐寺,然后將oldEndVnode和newEndVnode都設(shè)置為上一個(gè)子節(jié)點(diǎn)林艘,重復(fù)上述流程

    (4)如果oldStartVnode和newEndVnode是同一節(jié)點(diǎn),調(diào)用patchVnode進(jìn)行patch混坞,如果removeOnly是false狐援,那么可以把oldStartVnode.elm移動(dòng)到oldEndVnode.elm之后,然后把oldStartVnode設(shè)置為下一個(gè)節(jié)點(diǎn),newEndVnode設(shè)置為上一個(gè)節(jié)點(diǎn)啥酱,重復(fù)上述流程

    (5)如果newStartVnode和oldEndVnode是同一節(jié)點(diǎn)场钉,調(diào)用patchVnode進(jìn)行patch,如果removeOnly是false懈涛,那么可以把oldEndVnode.elm移動(dòng)到oldStartVnode.elm之前逛万,然后把newStartVnode設(shè)置為下一個(gè)節(jié)點(diǎn),oldEndVnode設(shè)置為上一個(gè)節(jié)點(diǎn)批钠,重復(fù)上述流程

    (6)如果以上都不匹配宇植,就嘗試在oldChildren中尋找跟newStartVnode具有相同key的節(jié)點(diǎn),如果找不到相同key的節(jié)點(diǎn)埋心,說(shuō)明newStartVnode是一個(gè)新節(jié)點(diǎn)指郁,就創(chuàng)建一個(gè),然后把newStartVnode設(shè)置為下一個(gè)節(jié)點(diǎn)

    (7)如果上一步找到了跟newStartVnode相同key的節(jié)點(diǎn)拷呆,那么通過(guò)其他屬性的比較來(lái)判斷這2個(gè)節(jié)點(diǎn)是否是同一個(gè)節(jié)點(diǎn)闲坎,如果是,就調(diào)用patchVnode進(jìn)行patch茬斧,如果removeOnly是false腰懂,就把newStartVnode.elm插入到oldStartVnode.elm之前,把newStartVnode設(shè)置為下一個(gè)節(jié)點(diǎn)项秉,重復(fù)上述流程

    (8)如果在oldChildren中沒(méi)有尋找到newStartVnode的同一節(jié)點(diǎn)绣溜,那就創(chuàng)建一個(gè)新節(jié)點(diǎn),把newStartVnode設(shè)置為下一個(gè)節(jié)點(diǎn)娄蔼,重復(fù)上述流程

    (9)如果oldStartVnode跟oldEndVnode重合了怖喻,并且newStartVnode跟newEndVnode也重合了,這個(gè)循環(huán)就結(jié)束了

    • 如果只有oldVnode有子節(jié)點(diǎn)岁诉,那就把這些節(jié)點(diǎn)都刪除
    • 如果只有vnode有子節(jié)點(diǎn)锚沸,那就創(chuàng)建這些子節(jié)點(diǎn)
    • 如果oldVnode和vnode都沒(méi)有子節(jié)點(diǎn),但是oldVnode是文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)涕癣,就把vnode.elm的文本設(shè)置為空字符串
    1. 如果vnode是文本節(jié)點(diǎn)或注釋節(jié)點(diǎn)哗蜈,但是vnode.text != oldVnode.text時(shí),只需要更新vnode.elm的文本內(nèi)容就可以
  1. 在 patchVNode 中會(huì)執(zhí)行到 updat 的生命周期函數(shù)属划,進(jìn)行 vnode 屬性的更新恬叹,更新會(huì)直接通知到 native。

參考:https://segmentfault.com/a/1190000008291645#articleHeader3

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末同眯,一起剝皮案震驚了整個(gè)濱河市绽昼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌须蜗,老刑警劉巖硅确,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件目溉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡菱农,警方通過(guò)查閱死者的電腦和手機(jī)缭付,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)循未,“玉大人陷猫,你說(shuō)我怎么就攤上這事〉难” “怎么了绣檬?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)嫂粟。 經(jīng)常有香客問(wèn)我娇未,道長(zhǎng),這世上最難降的妖魔是什么星虹? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任零抬,我火速辦了婚禮,結(jié)果婚禮上宽涌,老公的妹妹穿的比我還像新娘平夜。我一直安慰自己,他們只是感情好护糖,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布褥芒。 她就那樣靜靜地躺著嚼松,像睡著了一般嫡良。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上献酗,一...
    開(kāi)封第一講書(shū)人閱讀 52,549評(píng)論 1 312
  • 那天寝受,我揣著相機(jī)與錄音,去河邊找鬼罕偎。 笑死很澄,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的颜及。 我是一名探鬼主播甩苛,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼俏站!你這毒婦竟也來(lái)了讯蒲?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤肄扎,失蹤者是張志新(化名)和其女友劉穎墨林,沒(méi)想到半個(gè)月后赁酝,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡旭等,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年酌呆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搔耕。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡隙袁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出弃榨,到底是詐尸還是另有隱情藤乙,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布惭墓,位于F島的核電站坛梁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏腊凶。R本人自食惡果不足惜划咐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望钧萍。 院中可真熱鬧褐缠,春花似錦、人聲如沸风瘦。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)万搔。三九已至胡桨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瞬雹,已是汗流浹背昧谊。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留酗捌,地道東北人呢诬。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像胖缤,于是被迫代替她去往敵國(guó)和親尚镰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

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