1. 當(dāng)數(shù)據(jù)發(fā)生變化時，vue是怎么更新節(jié)點的？

要知道渲染真實DOM的開銷是很大的，比如有時候我們修改了某個數(shù)據(jù)，如果直接渲染到真實dom上會引起整個dom樹的重繪和重排，有沒有可能我們只更新我們修改的那一小塊dom而不要更新整個dom呢？diff算法能夠幫助我們。

我們先根據(jù)真實DOM生成一顆virtual DOM，當(dāng)virtual DOM某個節(jié)點的數(shù)據(jù)改變后會生成一個新的Vnode，然后Vnode和oldVnode作對比，發(fā)現(xiàn)有不一樣的地方就直接修改在真實的DOM上，然后使oldVnode的值為Vnode。

diff的過程就是調(diào)用名為patch的函數(shù)，比較新舊節(jié)點，一邊比較一邊給真實的DOM打補丁。

有點類似這樣：

<div><p>123</p> </div><script> var Vnode = {tag: 'div',children: [{ tag: 'p', text: '123' }] }; </script>// 在采取diff算法比較新舊節(jié)點的時候，比較只會在同層級進(jìn)行, 不會跨層級比較。

總結(jié)

以上是生活随笔為你收集整理的vue的diff 算法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。