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.ajax)
Nov 19 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
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 Error与Logging函数的深入理解
2013/06/03 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
js同源策略详解
2015/05/21 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
python中遍历文件的3个方法
2014/09/02 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python实现简单中文词频统计示例
2017/11/08 Python
python装饰器深入学习
2018/04/06 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
python中setuptools的作用是什么
2020/06/19 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
培训班主持词
2014/03/28 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
高一军训口号
2015/12/25 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang