探究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学习笔记(十七)js 优化
Feb 04 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 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
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
美国购车网站:TrueCar
2016/10/19 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
函授生自我鉴定
2014/03/25 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android