vue2.0的虛擬DOM渲染

時間 2019-11-15

標籤 vue2.0 vue 虛擬 dom 渲染欄目 HTML 简体版

原文原文鏈接

一、爲何須要虛擬DOM

前面咱們從零開始寫了一個簡單的類Vue框架（文章連接），其中的模板解析和渲染是經過Compile函數來完成的，採用了文檔碎片代替了直接對頁面中DOM元素的操做，在完成數據的更改後經過appendChild函數將真實的DOM插入到頁面。css

雖然採用的是文檔碎片，可是操做的仍是真實的DOM。html

而咱們知道操做DOM的代價是昂貴的，因此vue2.0採用了虛擬DOM來代替對真實DOM的操做，最後經過某種機制來完成對真實DOM的更新，渲染視圖。vue

所謂的虛擬DOM，其實就是用JS來模擬DOM結構，把DOM的變化操做放在JS層來作，儘可能減小對DOM的操做（我的認爲主要是由於操做JS比操做DOM快了不知道多少倍，JS運行效率高）。而後對比先後兩次的虛擬DOM的變化，只從新渲染變化了的部分，而沒有變化的部分則不會從新渲染。node

好比咱們有以下的DOM結構。git

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

咱們徹底能夠用JS對象模擬上面的DOM結構，模擬後就會變成下面的這種結構。github

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操做耗性能的一個點），而是隻模擬了一部分和數據操做相關的屬性和方法。算法

二、怎麼使用虛擬DOM

Vue在2.0版本引入了vdom。其vdom是基於snabbdom庫所作的修改。snabbdom是一個開源的vdom庫。segmentfault

snabbdom的主要做用就是將傳入的JS模擬的DOM結構轉換成虛擬的DOM節點。app

先經過其中的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>
    <div id="container"></div>
    <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的差別，以最小的代價從新渲染頁面。