欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

探究Vue.js 2.0新增的虚拟DOM

程序员文章站 2022-06-29 16:18:43
你可能早就已经听说了 vue.js 2.0。一个主要的令人兴奋的新特性就是更新页面的"虚拟dom"的加入。 虚拟 dom 可以做什么? react 和 ember 都使...

你可能早就已经听说了 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的知识,希望对大家有所帮助