對vue虛擬dom的研究

• Vue.js通過編譯將template 模板轉換成渲染函數(render ) ，執行渲染函數就可以得到一個虛擬節點樹
• 在對 Model 進行操作的時候，會觸發對應 Dep 中的 Watcher 對象。Watcher 對象會調用對應的 update 來修改視圖。這個過程主要是將新舊虛擬節點進行差異對比，然后根據對比結果進行DOM操作來更新視圖。

? ?簡單點講，在Vue的底層實現上，Vue將模板編譯成虛擬DOM渲染函數。結合Vue自帶的響應系統，在狀態改變時，Vue能夠智能地計算出重新渲染組件的最小代價并應到DOM操作上。

?patch(也叫做patching算法)：虛擬DOM最核心的部分，它可以將vnode渲染成真實的DOM，這個過程是對比新舊虛擬節點之間有哪些不同，然后根據對比結果找出需要更新的的節點進行更新。這點我們從單詞含義就可以看出， patch本身就有補丁、修補的意思，其實際作用是在現有DOM上進行修改來實現更新視圖的目的。Vue的Virtual DOM Patching算法是基于Snabbdom的實現，并在些基礎上作了很多的調整和改進

Virtual DOM 其實就是一棵以 JavaScript 對象( VNode 節點)作為基礎的樹，用對象屬性來描述節點，實際上它只是一層對真實 DOM 的抽象。最終可以通過一系列操作使這棵樹映射到真實環境上。

虛擬DOM的最終目標是將虛擬節點渲染到視圖上。但是如果直接使用虛擬節點覆蓋舊節點的話，會有很多不必要的DOM操作。例如，一個ul標簽下很多個li標簽，其中只有一個li有變化，這種情況下如果使用新的ul去替代舊的ul,因為這些不必要的DOM操作而造成了性能上的浪費。

為了避免不必要的DOM操作，虛擬DOM在虛擬節點映射到視圖的過程中，將虛擬節點與上一次渲染視圖所使用的舊虛擬節點（oldVnode）做對比，找出真正需要更新的節點來進行DOM操作，從而避免操作其他無需改動的DOM。

其實虛擬DOM在Vue.js主要做了兩件事：

• 提供與真實DOM節點所對應的虛擬節點vnode
• 將虛擬節點vnode和舊虛擬節點oldVnode進行對比，然后更新視圖

• 具備跨平臺的優勢

由于 Virtual DOM 是以 JavaScript 對象為基礎而不依賴真實平臺環境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node 等。

• 操作 DOM 慢，js運行效率高。我們可以將DOM對比操作放在JS層，提高效率。

因為DOM操作的執行速度遠不如Javascript的運算速度快，因此，把大量的DOM操作搬運到Javascript中，運用patching算法來計算出真正需要更新的節點，最大限度地減少DOM操作，從而顯著提高性能。

Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）

• 提升渲染性能

Virtual DOM的優勢不在于單次的操作，而是在大量、頻繁的數據更新下，能夠對視圖進行合理、高效的更新。

為了實現高效的DOM操作，一套高效的虛擬DOM diff算法顯得很有必要。我們通過patch 的核心----diff 算法，找出本次DOM需要更新的節點來更新，其他的不更新。

Vue的diff算法是基于snabbdom改造過來的，僅在同級的vnode間做diff，遞歸地進行同級vnode的diff，最終實現整個DOM樹的更新。因為跨層級的操作是非常少的，忽略不計，這樣時間復雜度就從O(n3)變成O(n)。

diff 算法的實現過程

diff 算法本身非常復雜，實現難度很大。本文去繁就簡，粗略介紹以下兩個核心函數實現流程：

• patch(container,vnode) :初次渲染的時候，將VDOM渲染成真正的DOM然后插入到容器里面。
• patch(vnode,newVnode):再次渲染的時候，將新的vnode和舊的vnode相對比，然后之間差異應用到所構建的真正的DOM樹上。

function createElement(vnode) {    
var tag = vnode.tag  
var attrs = vnode.attrs || {}    
var children = vnode.children || []    
if (!tag) {       return null  }    
// 創建真實的 DOM 元素    
var elem = document.createElement(tag)   // 屬性    
var attrName    
for (attrName in attrs) {    if (attrs.hasOwnProperty(attrName)) { // 給 elem 添加屬性elem.setAttribute(attrName, attrs[attrName])}}// 子元素children.forEach(function (childVnode) {// 給 elem 添加子元素，如果還有子節點，則遞歸的生成子節點。elem.appendChild(createElement(childVnode))  // 遞歸})    // 返回真實的 DOM 元素   return elem
}

2.patch(vnode,newVnode)

這里我們只考慮vnode與newVnode如何對比的情況：

function updateChildren(vnode, newVnode) {var children = vnode.children || []var newChildren = newVnode.children || []// 遍歷現有的childrenchildren.forEach(function (childVnode, index) {var newChildVnode = newChildren[index]// 兩者tag一樣if (childVnode.tag === newChildVnode.tag) {// 深層次對比，遞歸updateChildren(childVnode, newChildVnode)} else { // 兩者tag不一樣replaceNode(childVnode, newChildVnode) }}
)}

?