探究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 中的replace方法说明
Apr 13 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
Vue响应式原理详解
Apr 18 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php表单处理操作
2017/11/16 PHP
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python简单贪吃蛇开发
2019/01/28 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
某公司部分笔试题
2013/11/05 面试题
委托书如何写
2014/08/30 职场文书
社区国庆节活动总结
2015/03/23 职场文书
工资证明范本
2015/06/12 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python