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

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

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

当我们使用Javaｓｃｒｉｐｔ修改页面时，浏览器已经做了一些工作来找到DOM节点进行更改，例如：
document.getelementbyid（'myid）。AppendChild（mynewnode）；
在现代应用程序中，有成千上万个DOM节点，所以更新所产生的计算非常昂贵，繁琐的频繁更新会使页面变慢，这是不可避免的。

2。我们可以使用Javaｓｃｒｉｐｔ对象来替换DOM节点。

HTML文档中DOM节点的性能通常是相同的：
项目1
项目2
DOM节点也可以表示为Javaｓｃｒｉｐｔ对象，如下所示：
用javaｓｃｒｉｐｔ代码表示伪代码DOM节点
让domnode = { {
标签：'ul
属性：{编号：'myid}
孩子们：{
这是李先生/先生。
}
}；
这是一个很好理解的虚拟DOM节点。

三.更新虚拟节点并不昂贵。
更新虚拟DOM代码
DomNode.children.push（'item 3）；
如果我们用一个虚拟的DOM而不是直接调用一个方法like.getelementbyid，很便宜只有Javaｓｃｒｉｐｔ对象。

然后，将更改的部分更新为真正的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
）；
}
}）；
输出：
你好世界
你为什么这么做可以用完整的编程语言Javaｓｃｒｉｐｔ编程，也可以创建工厂风格的函数来构建虚拟节点。

总结

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