【一、Virtual DOM簡介】
Virtual DOM是虛擬節點，它通過Javascript的Object對象模擬DOM中的節點，然后通過特定的render方法將其渲染成真實的DOM節點。
瀏覽器在處理DOM時，總會附加很多屬性，這會使得每一次數據更新，渲染很慢。
Virtual DOM利用Javascript做了中間層，Javascript記錄狀態，將每一次狀態中的變化同步到視圖中。
【二、virtual DOM的優點】
-
保證性能下限，以及跨平台。
-
無需手動操作DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據虛擬DOM和數據雙向綁定，幫我們以可預期的方式更新視圖，極大提高我們的開發效率。
-
虛擬DOM的核心思想是：對復雜的文檔DOM結構，提供一種方便的工具，進行最小化的DOM操作，這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想。
【三、項目實施】
首先我們來簡單的模擬vue是如何生成虛擬DOM的，超簡版！！！
是否有點眼熟呢！沒錯，在使用Vue搭建的腳手架里面的main.js文件里面包含了這個代碼塊,接下來我們需要對我們new出來的Vue對象進行處理。
我們將基於Class VNode 這個類進行實現，如下圖所示：
tag代表的是標簽；
data代表的是屬性；
value代表的值；
type代表的是類型；
children代表的是子級。
虛擬DOM 轉換代碼如下:
現在分析一下轉換的過程：
1.先理解nodeType代表的是什么?
nodeType為1則代表元素，nodeType為3則代表文本。
2.當nodeType==1的情況下反過來再看看class VNode的構造函數需要的是什么？
需要什么我們就從DOM身上拿,nodeName代表標簽、_propertyObj代表屬性、nodeType代表類型元素身上是沒有文本的（因為nodeType為1代表元素，nodeType為3代表文本，當前的nodeType==1所以沒有文本，代表元素），所以value這個字段直接傳undefined。
3.把new出來的對象實例賦給_vnode，緊接着拿出當前元素的所有子元素 進行遍歷遞歸寫入_vnode中的children。
4.元素的處理結束了，nodeType==3 的情況下既然是文本肯定沒有標簽以及屬性所以直接傳undefined值則用node.nodeValue取，同樣nodeType也代表類型，每次遞歸進來會對不同類型做不同的處理。
【五、總結】
-
前端熱門框架Vue,React都使用了virtual DOM，其目的之一是為了提高性能，了解如何將DOM轉換為virtual DOM，就是在學習Vue的底層原理。
-
Vue中的diff算法就是將DOM樹同級進行對比，學習virtual DOM就是學習diff算法的前置知識點。
-
雖然這個知識點在平常的開發中幾乎不會用到，但是其中包含的思想確實值得我們學習的，走馬觀花不是學習，多想多練才是，希望對您有所幫助！
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/