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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 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 smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
Python数据结构之图的应用示例
2018/05/11 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
我的中国梦演讲稿1000字
2014/08/19 职场文书
委托书的写法
2014/08/30 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers