vue2.0的虚拟DOM渲染思路分析


Posted in Javascript onAugust 09, 2018

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、怎么使用虚拟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>
  <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由于没有改变,并没有重新渲染。

vue2.0的虚拟DOM渲染思路分析

vue中的模板解析和渲染的核心就是:通过类似snabbdom的h()和patch()的函数,先将模板解析成vnode,如果是初次渲染,则通过patch(container,vnode)将vnode渲染至页面,如果是二次渲染,则通过patch(vnode,newVnode),先通过Diff算法比较原vnode和newVnode的差异,以最小的代价重新渲染页面。

总结

以上所述是小编给大家介绍的vue2.0的虚拟DOM渲染思路分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
详解JS数值Number类型
Feb 07 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
功能完善的小程序日历组件的实现
Mar 31 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 #Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 #jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 #Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 #jQuery
详解在React中跨组件分发状态的三种方法
Aug 09 #Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
React中如何引入Angular组件详解
Aug 09 #Javascript
You might like
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
一段实时更新的时间代码
2006/07/07 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
学习python类方法与对象方法
2016/03/15 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
有个性的自我评价范文
2013/11/15 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
给国外客户的邀请函
2014/01/30 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
招聘专员岗位职责
2014/03/07 职场文书
交通事故私了协议书
2014/04/16 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
财务务虚会发言材料
2014/10/20 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书