探究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 27 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
Bootstrap table使用方法记录
Aug 23 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
详解Javascript实践中的命令模式
May 05 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 URL编码解码函数代码
2009/03/10 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python获取邮件地址的方法
2015/07/10 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
django输出html内容的实例
2018/05/27 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
应用服务器有那些
2012/01/19 面试题
初中化学教学反思
2014/01/23 职场文书
建材投资建议书
2014/05/16 职场文书
社区先进事迹材料
2014/05/19 职场文书
开服装店计划书
2014/08/15 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
Java spring定时任务详解
2021/10/05 Java/Android
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA