DIFF算法使用JavaScript代表DOM树的结构
虚拟DOM .VUE文件中的模板中编写的标签都是模板，它们都按VUE处理为虚拟DOM对象，并且将渲染以显示在实际DOM页面上
1.真实DOM的一些属性图：
2.标签结构Intemplate
VUE在内存中生成相同的虚拟DOM结构（本质上是JS对象）
相应的虚拟DOM结构
这个虚拟DOM只有几个属性，速度更快
将来的VUE数据更新
好处1：提高更新DOM的性能（无需删除页面并重新租赁）
好处2：虚拟DOM仅包含必要的属性（没有数百个真实DOM的属性）
摘要：虚拟DOM存储在内存中，仅记录DOM密钥信息，并使用DIFF算法来提高DOM更新的性能
情况1：根元素已更改，删除和重建旧的虚拟DOM
新的虚拟DOM
情况2：根元素没有更改，属性更改，重复使用，更新属性旧虚拟dom
新的虚拟DOM
根部元素没有改变，子元素没有更改，元素内容更改
当场没有关键的更新v-For不会移动DOM，而是试图重复使用和当场更新。如果您需要V-For来移动DOM，则需要使用特殊属性来提供排序提示
上面的代码效果是单击按钮，添加了一个新数据，相应的一个li，那么如何计算diff算法？
旧的 - 虚拟DOM结构和新的 - 虚拟DOM结构比较过程：第一级和一个比较
插图：
1.首先比较根标签，找到相同的标签，然后直接重复使用
2.再次比较LI标签，发现旧的虚拟DOM具有三个LI标签，而新的Virtual Dom具有四个标签。它将直接重复使用前三个LI标签，而不是重新删除和重建。
3.最后的比较内容，发现第一个内容没有更改，它将被重复使用。从第二个开始，相应的内容会更改，更新相应的内容
性能不高，已从第二个LI进行更新
由于具有新的和旧的虚拟DOM比较，索引有键键，重复使用键键以更新此标签的内容。如果没有存在，请创建一个新的
关键是索引插图过程：
有一个基于ID密钥的值。
V-For不会移动DOM，而是试图重复使用和当场更新。如果需要V-FOR移动DOM，则需要使用特殊属性来提供排序提示
插图效应（根据关键值进行比较）：
1.取决于旧DOM的钥匙值，键值为100,101,102的结构没有更改，并且直接重复使用
2.少一个是103 li。选择一个新的李
3.“老板”，“第二个孩子”的相应钥匙值。“老桑”没有改变，重复使用，并添加了'新“新”
摘要：将密钥添加到ID的性能更高。句子摘要--- ID ID（无重复字符串的字符串效应），没有ID的ID索引
摘要：Vue如何改善更新性能？
什么是虚拟DOM？
如何比较新的和旧的虚拟DOM？
原始：https：//juejin.cn/post/7099817250554642462