vue虛擬DOM是什麼？ vue的虛擬DOM的用法
- 不言原創
- 2018-08-09 11:00:3412713瀏覽
vue的虛擬DOM就是用js來模擬DOM結構，本文的內容就是要介紹vue虛擬DOM是什麼給朋友？以及vue的虛擬DOM的用法，接下來我們就來看看文章中具體的內容。
1、為什麼需要虛擬DOM
我們從零開始寫了一個簡單的類別Vue框架，其中的模板解析和渲染是透過Compile函數來完成的，採用了文件碎片取代了直接對頁面中DOM元素的操作，在完成資料的變更後透過appendChild函數將真實的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 = {
tag: 'ul',
attr: {
id: 'list',
},
children: [
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 1']
},
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 2']
}
}
]
}
必須注意一點的是：JS模擬的DOM結構並沒有模擬所有DOM節點上的屬性、方法（因為DOM節點本身的屬性非常多，這也是DOM操作耗性能的點），而是只模擬了一部分和資料操作相關的屬性和方法。
2、vue虛擬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的源碼來解釋到底snabbdom是怎麼幹成這件事的（主要是現階段沒到那個水平，哈哈。再者已經有很多同學做過類似的分析，相關連結附在文章末）。
我會從snabbdom的使用角度來看Vue中的虛擬DOM是如何完成視圖渲染的。
我們先來看看snabbdom中兩個核心API的功能。
h()函數：將傳入的JS模擬的DOM結構範本轉換成vnode。 （vnode是純JS物件）
patch()函數：將虛擬的DOM節點渲染到頁面中。
我們提供一個實例來看snabbdom的實際作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title></head><body>
<p id="container"></p>
<button id="btn-change">change</button>
<!-- 引入snabbdom库，先不必纠结为什么这样引入，以及每个文件的作用。本篇文章只是介绍一下虚拟DOM的工作方式，并不涉及原理解析
主要是因为博主目前功力尚浅，有兴趣的小伙伴可以另行研究 -->
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
<script>
//定义patch函数
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]) //定义h函数
var h = snabbdom.h; //生成一个vnode
var vnode = h('ul#list',{},[
h('li.item',{},['Item 1']),
h('li.item',{},['Item 2']),
])
//console.log(vnode);
//获取container
var container = document.getElementById('container');
patch(container,vnode);//初次渲染
var btn = document.getElementById('btn-change');
btn.onclick = function() {
var newVnode = h('ul#list',{},[
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>
想法分析：
我們先透過h函數建立一個虛擬DOM節點，透過patch函數將虛擬DOM渲染到頁面。
點擊btn按鈕時，更新ul#list列表的數據，改變了第二個li元素的值並且新增了一個li元素，第一個li元素的值並沒有改變。我們再次透過patch函數將更新後的資料渲染到頁面上。可以看到只有第二個和第三個li發生了更新，而第一個li由於沒有改變，並沒有重新渲染。
vue中的模板解析和渲染的核心就是：透過類似snabbdom的h()和patch()的函數，先將模板解析成vnode，如果是初次渲染，則透過patch(container,vnode)將vnode渲染至頁面，如果是二次渲染，則透過patch(vnode,newVnode)，先透過Diff演算法比較原vnode和newVnode的差異，以最小的代價重新渲染頁面。
相關文章推薦：
以上是vue虛擬DOM是什麼？ vue的虛擬DOM的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！