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

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

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

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

有點(diǎn)類似這樣：

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

總結(jié)

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

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