虛擬dom 虛擬 DOM 和 DOM diff

乙個能代表dom樹的物件，通常含有標籤名、標籤上的屬性、事件監聽和子元素及其它屬性。

虛擬dom在vue和react中的示例：

const rnode = , 
],classname: "red" // 標籤上的屬性
onclick: () => {} // 事件
},ref: null,
type: "div", // 標籤名 or 元件名
...}const vnode = // 事件}},
children: [ // 子元素們,],
...}

createelement('div',},[
createelement('span', {}, 'span1'),
createelement('span', {}, 'span2')
])//vue（只能在 render 函式裡得到 h）
h('div', 
},}, [h('span',{},'span1'), h('span', {}, 'span2'])

//react jsx
{}}">
span1
span2
//vue template
h('div', 
},}, [h('span',{},'span1'), h('span', {}, 'span2'])

//react span1 span2 //通過 babel 轉為 createelement 形式 //vue template span1 span2 //通過 vue-loader 轉為 h 形式

dom操作慢？虛擬dom快？

我們來仔細分析下這句話的適用場景，這句話就好比「劉翔矮（對比於姚明來說）」，同樣dom操作慢是對比於js原生api，如陣列操作。任何基於dom的庫（vue/react）都不可能在操作dom時比dom快。

為什麼大家這麼說呢？因為在某些情況下，虛擬dom快。

假如一次操作中有10次更新dom的動作，虛擬dom不會立即操作dom，而是將這10次更新的diff內容儲存到本地的乙個js物件中，最終將這個js物件一次性attach到dom樹上，通知瀏覽器去執行繪製工作，這樣可以避免大量的無謂的計算量。

虛擬 dom 的優點：

跨平台虛擬 dom 的缺點

dom diff其實就是乙個函式，你可以稱它為patch，

patches = patch(oldvnode, newvnode)

你可以把虛擬dom想象成一棵大樹的形狀，畫面自己腦補把！

假設有如下的**：

結合下面的樹形結構：

當資料變化時

x 從 red變成green

dom diff發現：div標籤型別沒變，只需要更新 div 對應的 dom 的屬性；子元素沒變，不更新。

y 從 true變成false

dom diff發現：div 沒變，不用更新；子元素1標籤沒變，但是children變了，更新 dom 內容；子元素2不見了，刪除對應的 dom。

通過上面的分析研究，猜測出dom diff 的大概邏輯是：

將新舊兩棵樹逐層對比，找出哪些節點需要更新；如果節點是元件就看 component diff；如果節點是標籤就看 element diff。

如果節點是元件，就先看元件型別；型別不同直接替換（刪除舊的）；型別相同則只更新屬性；然後深入元件做 tree diff（遞迴）。

如果節點是原生標籤，則看標籤名；標籤名不同直接替換，相同則只更新屬性；然後進入標籤後代做 tree diff（遞迴）。

但是dom diff 存在乙個問題（key），在同級節點對比存在bug。

如果你現在有3個相同型別的同級標籤，當刪除第2個的時候，我們的預期是當前操作後只剩下1和3，但是計算機不會和我們一樣去解決問題，它會理解為你把第2個改為了第3個，然後再把第3個刪除。怎麼解決呢？

在每乙個相同型別的同級標籤上新增乙個唯一的key，這樣dom diff就會明確地知道你操作的是哪個元素。

虛擬dom 虛擬 DOM 和 DOM diff

虛擬DOM與真實DOM

虛擬DOM操作

vue虛擬DOM是什麼？vue的虛擬DOM的用法

虛擬dom 虛擬 DOM 和 DOM diff

虛擬DOM與真實DOM

虛擬DOM操作

vue虛擬DOM是什麼？vue的虛擬DOM的用法

相關推薦