【一、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/
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/93490.html
標籤：Python
下一篇：pythont多執行緒