探究Vue.js 2.0新增的虚拟DOM


Posted in Javascript onOctober 20, 2016

你可能早就已经听说了 Vue.js 2.0。一个主要的令人兴奋的新特性就是更新页面的"虚拟DOM"的加入。

虚拟 DOM 可以做什么?

React 和 Ember 都使用了虚拟DOM来提升页面的刷新速度。为了理解其如何工作,让我们先讨论一下几个概念:

更新DOM的花费时间非常长

当我们使用 JavaScript 来改变页面的时候,浏览器不得不做一些工作来找到需要的DOM节点,并且做出类似这样的改变:

document.getElementById('myId').appendChild(myNewNode);

在如今的应用程序的DOM中大概有成千上万的节点,因此更新所花费的时间就更长了。有很多不可避免的很小很频繁的更新拖慢了页面的速度。

我们可以使用 JavaScript 将DOM节点虚拟化表示

在一个HTML中,DOM节点通常表示如下:

<ul id='myId'>
<li>Item 1</li>
<li>Item 2</li>
<ul>

DOM 节点也可以表示 JavaScript 中的对象,像这样:

// Pseudo-code of a DOM node represented as Javascript
Let domNode = {
tag: 'ul'
attributes: { id: 'myId' }
children: [
// where the LI's would go
]
};

这就是我们的“虚拟”DOM。

更新虚拟节点的开销不大

// This might be how we update the virtual DOM
domNode.children.push('<ul>Item 3</ul>');

如果我们使用虚拟DOM,而不是直接在代码中调用类似 .getElementById 的 DOM API 方法,操作就会像改变 JS 对象一样非常的简单省时。

接下来,就是同步的把我们做的改变更新到真实DOM 中去,我们使用了一个很有效率的函数:

// This function would call the DOM API and make changes
// to the "real" DOM. It would do it in batches and with
// more efficiency than it would with arbitrary updates.
sync(originalDomNode, domNode);

Vue.js 在版本2中加入了虚拟DOM,这挺好的…对吧?

就像在生活和 Web 开发中的每一件事,虚拟DOM有利也有弊。

大小 - 其中之一就是更多的功能意味着代码包中更多行的代码。幸运的是,Vue.js 2.0 依旧比较小(当前版本 21.4kb),并且也正在删除很多东西。

内存 -同样,虚拟DOM需要将现有的DOM拷贝后保存在内存中,这是一个在DOM更新速度和内存使用中的权衡。

并不适用所有情况 -如果虚拟DOM可以一次性进行批量的修改是非常好的。但是如果是单独的、稀少的更新呢?这样的任何DOM更新都将会使虚拟DOM带来无意义的预计算。

因此,如果某个项目只有较少数量的节点,那么使用虚拟DOM会带来速度上质的变化么?实际上更可能的是使其更慢了!

但是对于多数的单页面应用来说,它还是会带来提升的。

不仅仅是性能

使用虚拟DOM不仅仅是一次性能上的优化,还意味着带来了更多的功能。

例如,你可以使用虚拟DOM通过 render() 方法直接创建新节点:

new Vue({
el: '#app',
data: {
message: 'hello world'
},
render() {
var node = this.$createElement;
return node(
'div', 
{ attrs: { id: 'myId' } }, 
this.message
);
}
});

输出:

<div id='app'>
<div id='myId'>hello world</div>
</div>

为什么做这个?它为你的JavaScript带来了全编程能力。你可以通过使用JavaScript的数组方法来创建工厂化函数来搭建你的虚拟节点等等,这些用模板语法处理起来可能会更复杂。

以上所述是小编给大家介绍的Vue.js 2.0新增的虚拟DOM的知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
js中的string.format函数代码
Aug 11 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 #Javascript
javascript匀速动画和缓冲动画详解
Oct 20 #Javascript
js设置和获取自定义属性的方法
Oct 20 #Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 #Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 #Javascript
详解javascript事件绑定使用方法
Oct 20 #Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 #Javascript
You might like
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python中的对数log函数表示及用法
2020/12/09 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
社会实践心得体会
2014/01/03 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
诉前财产保全担保书
2014/05/20 职场文书
离职感谢信怎么写
2015/01/22 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android