（1）vdom是什么？
vdom是虛擬DOM(Virtual DOM)的簡稱，指的是用JS模擬的DOM結構，將DOM變化的對比放在JS層來做。換而言之，vdom就是JS對象。

如下DOM結構:

<ul id="list"><li class="item">Item1</li><li class="item">Item2</li> </ul>

映射成虛擬DOM就是這樣:

{tag: "ul",attrs: {id:&emsp;"list"},children: [{tag: "li",attrs: { className: "item" },children: ["Item1"]}, {tag: "li",attrs: { className: "item" },children: ["Item2"]}] }

---

(2)為什么要用vdom?

采用JS對象模擬的方法，將DOM的比對操作放在JS層，減少瀏覽器不必要的重繪，提高效率。
當然有人說虛擬DOM并不比真實的DOM快，其實也是有道理的。

虛擬DOM更加優秀的地方在于:

1、它打開了函數式的UI編程的大門，即UI = f(data)這種構建UI的方式。

2、可以將JS對象渲染到瀏覽器DOM以外的環境中，也就是支持了跨平臺開發，比如ReactNative。

---

(3)什么是diff算法？

所謂diff算法，就是用來找出兩段文本之間的差異的一種算法。

(4)vdom為什么用diff算法?

DOM操作是非常昂貴的，因此我們需要盡量地減少DOM操作。這就需要找出本次DOM必須更新的節點來更新，其他的不更新，這個找出的過程，就需要應用diff算法。

const createElement = (vnode) => {let tag = vnode.tag;let attrs = vnode.attrs || {};let children = vnode.children || [];if(!tag) {return null;}//創建元素let elem = document.createElement(tag);//屬性let attrName;for (attrName in attrs) {if(attrs.hasOwnProperty(attrName)) {elem.setAttribute(attrName, attrs[attrName]);}}//子元素children.forEach(childVnode => {//給elem添加子元素elem.appendChild(createElement(childVnode));})//返回真實的dom元素return elem; }

用簡易diff算法做更新操作:

function updateChildren(vnode, newVnode) {let children = vnode.children || [];let newChildren = newVnode.children || [];children.forEach((childVnode, index) => {let newChildVNode = newChildren[index];if(childVnode.tag === newChildVNode.tag) {//深層次對比, 遞歸過程updateChildren(childVnode, newChildVNode);} else {//替換replaceNode(childVnode, newChildVNode);}}) }

總結

以上是生活随笔為你收集整理的Virtual DOM和diff算法 概念理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。