vue什么是虚拟dom,vue和react的优缺点

什么是虚拟DOMDOM树？ 为什么本机JS要浪费性能？ 什么是虚拟DOM？ 为什么虚拟DOM的结构更好？ 什么是diff算法？

在这三个框架中，(vue，react )都使用虚拟DOM提高了效率，所以什么是虚拟DOM？ 为什么要用？ 而且那个是怎么工作的？

什么是DOM

浏览器中的概念，用JS对象表示页面上的元素，并提供用于处理DOM对象的API

DOM树的网页上显示的概念网页呈现的过程：

浏览器请求服务器检索页面的HTML代码浏览器首先在内存中分析DOM结构，然后在浏览器的内存中渲染DOM树浏览器，以在页面上绘制DOM树。 为什么本机JS会浪费性能呢？举个例子：

我更新10个DOM节点。 每次更新一个浏览器，但第一次更新时不知道后面有9个，所以每次运行一个，总共运行10次。 每次更新都必须计算，但更新后DOM树会发生变化，在第二次更新时，上次计算的不能再使用，需要重新计算。 浪费性能。

什么是虚拟DOM？ 框架中的概念是用JS对象模拟页面上DOM和DOM之间的嵌套，本质上是对象，而且是根据需要添加本机对象中的属性，并不是全部都存在，而是更加“

工作原理是获取内存中的[虚拟]dom树和新生成的[虚拟]dom树，用diff算法进行比较，得到需要更新的DOM元素

这两个“虚拟”DOM树都是在框架中模拟的，是对象。 旧的东西会保存在内存中

为什么虚拟DOM的性能很好？ 要更新10个DOM节点，虚拟DOM仍然可以通过使用diff算法框架创建的虚拟DOM树(即个对象)来加快对象更新，而不是一次通知浏览器。 然后，一次在浏览器中装载和更新修改的虚拟DOM树，以减少计算的浪费。

这样比较后，浏览器只运行一次，实现了有效的更新渲染

什么是diff算法？ 分为三个部分treediffcomponentdiffelementdiff，比较新旧(虚拟) dom树、dom树的组件和组件元素

tree diff

按层次比较新旧两个DOM树的过程是tree diff

按层次比较整个DOM树时，更新的元素component diff

如果执行tree diff，则比较每层组件，如果新旧组件类型相同，则执行元素diff比较；如果不同，则直接删除组件，然后执行新组件element diff

在component diff比较中，如果两个组件类型相同，则会比较内部元素

总结

比较整个DOM树时，将比较页面中DOM树的内容是否有变化，然后比较组件是否匹配、不匹配的替换以及匹配的比较组件是否匹配疲劳元素。 一旦完成更新，所有元素都不会泄露

但是，在循环的情况下，key值的设定有问题会导致diff算法的比较错误。 在下一章详细理解key是有效的。 为什么不能将索引用作密钥？