探究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 写类方式之五
Jul 05 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
javascript中Number的方法小结
Nov 21 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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实现即时输出、实时输出内容方法
2015/05/27 PHP
表单内同名元素的控制
2006/11/22 Javascript
用 JavaScript 迁移目录
2006/12/18 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python批量处理文件或文件夹
2020/07/28 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
成考报名单位证明范本
2014/01/16 职场文书
大学生党员自我批评
2014/02/14 职场文书
晚归检讨书
2014/02/19 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL