Vue的diff算法是一種優化虛擬DOM的方法，可以大幅提升頁面性能。

當Vue組件狀態發生改變時，它會重新渲染虛擬DOM樹。Vue的diff算法會比較新舊虛擬DOM樹的差異，并且只更新有變化的部分，而不是重新渲染整個樹。

const oldVnode = ...
const newVnode = ...
const patch = Vue.prototype.__patch__
patch(oldVnode, newVnode)

Vue的diff算法是基于兩個假設的：

• 同級元素有唯一的標識(key)。
• 盡可能復用老節點。

這意味著Vue只會在同級元素之間比較，而不是整個樹。如果兩個節點的key相同，那么它們被認為是同一個節點，可以被復用。

當Vue比較新舊節點時，它會遍歷兩個節點的子樹，比較同級元素的差異。如果元素類型不同，則直接替換；如果元素類型相同，則比較屬性差異。如果key相同，那么它們就是同一個節點，可以復用；否則就要銷毀舊節點，創建新節點。

// 偽代碼
function updateChildren(oldCh, newCh) {
let oldStartIdx = 0
let oldEndIdx = oldCh.length - 1
let newStartIdx = 0
let newEndIdx = newCh.length - 1
while (oldStartIdx<= oldEndIdx && newStartIdx<= newEndIdx) {
const oldVnode = oldCh[oldStartIdx]
const newVnode = newCh[newStartIdx]
if (sameVnode(oldVnode, newVnode)) {
patchVnode(oldVnode, newVnode)
oldStartIdx++
newStartIdx++
} else {
break
}
}
// ...
}

所以，當我們使用Vue開發應用時，應該遵循這兩個假設，盡量避免同級元素之間的交換，因為它會破壞組件狀態，并可能導致重復渲染。另外，我們也可以手動設置key來優化diff算法，例如在列表元素的v-for循環中：

<div v-for="item in list" :key="item.id">{{ item.text }}</div>