什么是虚拟DOM？简单来说，它是一个包含三个属性的对象：tag、props、children。接下来大家思考两个问题：与通过原生js操作DOM相比，通过虚拟DOM对DOM进行增删改查性能真的更好吗？如果通过虚拟DOM操作DOM的性能并不比原生js操作DOM好，为什么Vue会选择使用虚拟DOM？操作DOM的几种方法一般来说，我们在操作DOM结构时有哪些方法呢？第一种是使用原生js精确选择我们要操作的DOM节点，然后对其进行相应的操作。比如我们要修改一个div节点的内容，我们需要这样做：constdiv=document.getElementById('div')div.innerText='helloworld'这样，我们就修改了div元素到你好世界。第二种方式是通过html模板字符串创建节点来替换当前节点。这种方式在jQuery时代很常见。consthtmlTemplate=`
helloworld
`wrap.innerHTML=htmlTemplate这样也可以达到同样的目的。第三种方式是通过虚拟DOM修改：constvirtualDOM={tag:'div',children:[{children:'helloworld'}]}//render函数将虚拟DOM创建为真实DOM并转换为插入intothedocumentandrender(virtualDOM)对比以上三种方法。您认为哪种方法的性能最好？很明显是第一个，选择要修改的元素，直接修改它的内容。第二种应该是第三种方法，为什么不是第二种呢？因为当通过虚拟DOM修改div的内容时，通过diff算法可以将修改后的内容最小化。对于上面的情况，只是改变了div的内容，而div元素本身并没有修改任何东西，所以当通过虚拟DOM修改div的内容时，不会重新创建div标签。使用html模板字符串的方法将重新创建模板中的所有节点。我们都知道对于浏览器来说，创建DOM的过程是非常耗时的。因此，第三种方法的性能要优于第二种方法，而且html模板字符越大，性能差异越明显。第一种方法和第三种方法的比较呢？理论上第一种方法的性能已经是最好的了，因为没有其他额外的操作来消耗性能。与第一种方式相比，虚拟DOM多了一个虚拟DOM对象的创建和修改目标的查找。但是这个过程是纯javascript级别的计算，所以这两种方法虽然可能会有一些性能上的差异，但是差异不会很大。毕竟相对于DOM级别的计算，JavaScript级别的计算带来的性能差异几乎可以忽略不计。至此，我们明白了，很明显，虚拟DOM的性能并不比通过原生js操作DOM好。那么问题来了，在这种情况下，为什么Vue会选择使用虚拟DOM呢？精神负担不得不说这些方法带来的精神负担。顺便提个问题，现在让你用原生js实现页面DOM的增删改查操作，你愿意吗？我相信如果你的领导真的让你这样做，你一定会吐口水不干的。明明我有飞机有大炮了，你还让我拿刺刀跟敌人拼？所以选择virtualDOM的原因几乎很明确：性能还不错，虽然比不上通过nativejs操作DOM的性能，但是也不算太差，可以保证性能的下限。精神负担小，毕竟虚拟DOM的操作其实只是一个对象。对于我们来说，操作对象比一个一个选择DOM，修改DOM要简单的多，因为我们只需要关心数据。