【一、Virtual DOM簡介】

Virtual DOM是虛擬節點，它通過Javascript的Object物件模擬DOM中的節點，然後通過特定的render方法將其渲染成真實的DOM節點。

瀏覽器在處理DOM時，總會附加很多屬性，這會使得每一次資料更新，渲染很慢。

Virtual　DOM利用Javascript做了中間層，Javascript記錄狀態，將每一次狀態中的變化同步到檢視中。

【二、virtual DOM的優點】

1. 保證效能下限，以及跨平臺。

2. 無需手動操作DOM，只需要寫好 View-Model 的程式碼邏輯，框架會根據虛擬DOM和資料雙向繫結，幫我們以可預期的方式更新檢視，極大提高我們的開發效率。

3. 虛擬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也代表型別，每次遞迴進來會對不同型別做不同的處理。

【五、總結】

1. 前端熱門框架Vue,React都使用了virtual DOM，其目的之一是為了提高效能，瞭解如何將DOM轉換為virtual DOM，就是在學習Vue的底層原理。

2. Vue中的diff演演算法就是將DOM樹同級進行對比，學習virtual DOM就是學習diff演演算法的前置知識點。

3. 雖然這個知識點在平常的開發中幾乎不會用到，但是其中包含的思想確實值得我們學習的，走馬觀花不是學習，多想多練才是，希望對您有所幫助！
   
   想學習更多Python網路爬蟲與資料探勘知識，可前往專業網站：http://pdcfighting.com/