vue2.0的虚拟DOM渲染

时间 2020-05-29

标签 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的差别，以最小的代价从新渲染页面。

三、参考文章

vue 的 Virtual Dom 实现 - snabbdom 解密