探究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:;与javascript:void(0)使用介绍
Jun 05 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
JavaScript的Function详细
2006/11/14 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
python操作CouchDB的方法
2014/10/08 Python
python通过索引遍历列表的方法
2015/05/04 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
python3.5的包存放的具体路径
2020/08/16 Python
scrapy头部修改的方法详解
2020/12/06 Python
一年级小学生评语
2014/04/22 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
优秀教研组申报材料
2014/12/26 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
nginx请求限制配置方法
2021/07/09 Servers
详解Python flask的前后端交互
2022/03/31 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技