vue2 0的虛擬DOM渲染

雖然採用的是文件碎片，但是操作的還是真實的dom。

而我們知道操作dom的代價是昂貴的，所以vue2.0採用了虛擬dom來代替對真實dom的操作，最後通過某種機制來完成對真實dom的更新，渲染檢視。

所謂的虛擬dom，其實就是用js來模擬dom結構，把dom的變化操作放在js層來做，儘量減少對dom的操作（個人認為主要是因為操作js比操作dom快了不知道多少倍，js執行效率高）。然後對比前後兩次的虛擬dom的變化，只重新渲染變化了的部分，而沒有變化的部分則不會重新渲染。

比如我們有如下的dom結構。

<
ul id
="list"
>
<
li class
="item1"
>item 1
li>
<
li class
="item2"
>item 2
li>
ul>

我們完全可以用js物件模擬上面的dom結構，模擬後就會變成下面的這種結構。

var vdom =,
children: [,},}]}

必須要注意一點的是：js模擬的dom結構並沒有模擬所有dom節點上的屬性、方法（因為dom節點本身的屬性非常多，這也是dom操作耗效能的乙個點），而是只模擬了一部分和資料操作相關的屬性和方法。

vue在2.0版本引入了vdom。其vdom是基於snabbdom庫所做的修改。snabbdom是乙個開源的vdom庫。

snabbdom的主要作用就是將傳入的js模擬的dom結構轉換成虛擬的dom節點。

先通過其中的h函式將js模擬的dom結構

轉換成虛擬dom之後，再通過其中的patch函式將虛擬dom轉換成真實的dom渲染到頁面中。

為了保證頁面的最小化渲染，snabbdom引入了diff演算法，通過diff演算法找出前後兩個虛擬dom之間的差異，只更新改變了的dom節點，而不重新渲染為改變的dom節點。

我會從snabbdom的使用角度來看vue中的虛擬dom是如何完成檢視渲染的。

我們先看一下snabbdom中兩個核心api的功能。

我們提供乙個例項來看一下snabbdom的實際作用。

//定義patch函式

varpatch

=snabbdom.init([

snabbdom_class,

snabbdom_props,

snabbdom_style,

snabbdom_eventlisteners

])//定義h函式

varh

=snabbdom.h;

//生成乙個vnode

varvnode =h(

'ul#list

',{},[

h('li.item

',{},[

'item 1

']),

h('li.item

',{},[

'item 2

']),

])//獲取container

varcontainer

=document.getelementbyid(

'container');

patch(container,vnode);

//初次渲染

varbtn

=document.getelementbyid(

'btn-change');

btn.onclick

=function

() ,[

h('li.item

',{},[

'item 1

']),

h('li.item

',{},[

'item b

']),

h('li.item

',{},[

'item 3

']),

])patch(vnode,newvnode);

//再次渲染

vnode

=newvnode;

//將修改後的newvnode賦值給vnode

}

script

body

html

思路分析：

vue中的模板解析和渲染的核心就是：通過類似snabbdom的h()和patch()的函式，先將模板解析成vnode，如果是初次渲染，則通過patch(container,vnode)將vnode渲染至頁面，如果是二次渲染，則通過patch(vnode,newvnode)，先通過diff演算法比較原vnode和newvnode的差異，以最小的代價重新渲染頁面。

vue 的 virtual dom 實現 - snabbdom 解密

一起理解 virtual dom

virtual-dom(vue實現)簡析

解析vue2.0的diff演算法

vue為什麼要用vdom？

vue2 0的虛擬DOM渲染

vue2 0使用預渲染

手寫Vue2 0原始碼渲染更新原理

手寫Vue2 0原始碼渲染更新原理

vue2 0的虛擬DOM渲染

vue2 0使用預渲染

手寫Vue2 0原始碼 渲染更新原理

手寫Vue2 0原始碼 渲染更新原理

相關推薦

手寫Vue2 0原始碼渲染更新原理

手寫Vue2 0原始碼渲染更新原理