一篇文章教會你如何將DOM轉換爲virtual DOM

【1、Virtual DOM簡介】

Virtual DOM是虛擬節點，它經過Javascript的Object對象模擬DOM中的節點，而後經過特定的render方法將其渲染成真實的DOM節點。

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

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

【2、virtual DOM的優勢】

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

2. 無需手動操做DOM，只須要寫好 View-Model 的代碼邏輯，框架會根據虛擬DOM和數據雙向綁定，幫咱們以可預期的方式更新視圖，極大提升咱們的開發效率。

3. 虛擬DOM的核心思想是：對複雜的文檔DOM結構，提供一種方便的工具，進行最小化的DOM操做，這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想。

【3、項目實施】

首先咱們來簡單的模擬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也表明類型，每次遞歸進來會對不一樣類型作不一樣的處理。

【5、總結】

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

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

3. 雖然這個知識點在日常的開發中幾乎不會用到，可是其中包含的思想確實值得咱們學習的，蜻蜓點水不是學習，多想多練纔是，但願對您有所幫助！