vue为什么要用虚拟dom机制_Vue.js 虚拟DOM原理（DOM是如何更新的）

Vue.js 虚拟DOM原理(DOM是如何更新的)

Vue.js 虚拟DOM原理(DOM是如何更新的)

一、什么是DOM？DOM的作用？

文档对象模型(Document Object model，简称DOM)是针对HTML和XML文档的一个API(应用程序编程接口)。

也就是说：DOM是一个接口，一个API,我们可以通过DOM这个接口来对文档进行修改。

DOM会把文档表示为一棵树，这里以(HTML)为例：

HTML代码：

My title

My link

My header

对应的DOM Tree:

在DOM中，文档是由节点构成的集合。(节点类型：元素节点(element)、文本节点(text)、属性节点(attribute))

元素节点：就是HTML中的标签，如：、

、、、 、

等

文本节点：如上图中的"My title"、"My link"等

属性节点：如上图中的"href"，以及我们在html中经常使用的"class"、"title"等

DOM的出现就是为了能够操作HTML中的元素：举个栗子

这是一段文字

var wriText = document.getElementById("writing");

wriText.setAttribute("title","this is writing");

getElementById() 就是DOM的一个方法；

setAttribute() 方法添加指定的属性，并为其赋指定的值(若属性已存在，就是更改/设置值)。

DOM修改前：

DOM修改后：

二、浏览器解析DOM的运行机制？

https://www.cnblogs.com/yaya-003/p/12855846.html

JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能，频繁操作还是会出现页面卡顿，影响用户体验。

Vue.js 虚拟DOM原理(DOM是如何更新的)相关教程