• 由于在瀏覽器中操作DOM是很昂貴的。頻繁的操作DOM，會(huì)產(chǎn)生一定的性能問題。這就是虛擬Dom的產(chǎn)生原因。

• Virtual DOM本質(zhì)就是用一個(gè)原生的JS對(duì)象去描述一個(gè)DOM節(jié)點(diǎn)。是對(duì)真實(shí)DOM的一層抽象。(也就是源碼中的VNode類，它定義在src/core/vdom/vnode.js中。)

• 虛擬 DOM 的實(shí)現(xiàn)原理主要包括以下 3 部分

  • 用 JavaScript 對(duì)象模擬真實(shí) DOM 樹，對(duì)真實(shí) DOM 進(jìn)行抽象

  • diff 算法 — 比較兩棵虛擬 DOM 樹的差異

  • pach 算法 — 將兩個(gè)虛擬 DOM 對(duì)象的差異應(yīng)用到真正的 DOM 樹

• key 是為 Vue 中 vnode 的唯一標(biāo)記，通過這個(gè) key，我們的 diff 操作可以更準(zhǔn)確、更快速

  • 更準(zhǔn)確：因?yàn)閹?key 就不是就地復(fù)用了，在 sameNode 函數(shù)a.key === b.key對(duì)比中可以避免就地復(fù)用的情況。所以會(huì)更加準(zhǔn)確。

  • 更快速：利用 key 的唯一性生成 map 對(duì)象來獲取對(duì)應(yīng)節(jié)點(diǎn)，比遍歷方式更快

為什么不建議用index作為key?

• 不建議 用index 作為 key，和沒寫基本上沒區(qū)別，因?yàn)椴还苣銛?shù)組的順序怎么顛倒，index 都是 0, 1, 2 這樣排列，導(dǎo)致 Vue 會(huì)復(fù)用錯(cuò)誤的舊子節(jié)點(diǎn)，做很多額外的工作

diff算法

• 同級(jí)比較，再比較子節(jié)點(diǎn)
• 先判斷一方有子節(jié)點(diǎn)一方?jīng)]有子節(jié)點(diǎn)的情況(如果新的children沒有子節(jié)點(diǎn)，將舊的子節(jié)點(diǎn)移除)
• 比較都有子節(jié)點(diǎn)的情況(核心diff)
• 遞歸比較子節(jié)點(diǎn)