2的vue.js窥探虚拟DOM是什么

Virtual DOM是干什么的



之前,反应和灰烬开始使用虚拟DOM技术来提高页面更新的速度。如果你想知道它是如何工作的,你必须认识到这些概念。

1。更新DOM是一项非常昂贵的操作。

当我们使用Javascript修改页面时,浏览器已经做了一些工作来找到DOM节点进行更改,例如:


document.getelementbyid('myid)。AppendChild(mynewnode);


在现代应用程序中,有成千上万个DOM节点,所以更新所产生的计算非常昂贵,繁琐的频繁更新会使页面变慢,这是不可避免的。

2。我们可以使用Javascript对象来替换DOM节点。

HTML文档中DOM节点的性能通常是相同的:



项目1
项目2



DOM节点也可以表示为Javascript对象,如下所示:


用javascript代码表示伪代码DOM节点
让domnode = { {
标签:'ul
属性:{编号:'myid}
孩子们:{
这是李先生/先生。
}
};


这是一个很好理解的虚拟DOM节点。

三.更新虚拟节点并不昂贵。


更新虚拟DOM代码
DomNode.children.push('item 3);


如果我们用一个虚拟的DOM而不是直接调用一个方法like.getelementbyid,很便宜只有Javascript对象。

然后,将更改的部分更新为真正的DOM,如下所示:


这种方法称为DOM API来改变真实的DOM。
为了获得更高的效率,它将被执行。
同步(originaldomnode,domnode);


Vue.js在2版中引入虚拟的DOM一个正确的选择吗



事实上,引入虚拟DOM既有优点也有缺点。

1。大小



更多的功能意味着更多的代码。幸运的是,vue.js 2仍然是很小的(对21.4kb当前版本)。



2。记忆



虚拟DOM需要在内存中维护DOM的副本。DOM更新速度与内存空间使用之间的平衡。



三.它不适合所有情况。



如果虚拟DOM的改变很多,这是合适的。但是,一个单一的、频繁的更新,虚拟DOM将花费更多的时间来处理计算工作。

因此,如果有一个相对较少的DOM节点,使用虚拟DOM,它实际上可能会慢一些。

但对于大多数单页应用程序来说,这应该更快一些。



除了性能改进,还有什么其他功能



虚拟DOM的引入,不仅提高了性能,而且意味着更多的功能。

例如,您可以直接在虚拟DOM中的呈现()方法中创建一个新的节点:


新的Vue({
EL:# APP,
数据:{
留言:你好世界
},
渲染(){
var node =这$ createElement;
返回节点(
div,
{属性:{编号:'myid} },
this.message
);
}
});


输出:



你好世界



你为什么这么做可以用完整的编程语言Javascript编程,也可以创建工厂风格的函数来构建虚拟节点。

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问,你可以留言。