Vue虚拟DOM
Vue 中 虚拟 dom 介绍
虚拟 dom
-
核心思想：对复杂的文档 DOM 结构，提供一种方便的工具，进行最小化地 DOM 操作
-
具体操作：
- 内存中会生成一颗虚拟 dom 树，并将内存中的虚拟 dom 树初始化渲染成真实 dom 树
- 当我们修改了 data 里面的数据时，将之前的虚拟 dom 树结合新的数据，生成一颗新的虚拟 dom 树
- 并将新的虚拟 dom 树和之前的虚拟 dom 树进行对比， 把对比出来差异的部分进行重新真实 dom 结构的渲染
-
节省性能的原因
当内部数据变化，生成一颗新的虚拟 dom 树，与上一次的虚拟 dom 树结构进行对比。也就是说，当数据变化的时候，大量操作的是虚拟 dom，而虚拟 dom 属于内存数据，操作起来性能要高的多。而真实的dom 操作，只有在重新渲染的那一刻才会进行操作，大大提升了性能。
虚拟 dom 的 diff 算法
-
虚拟 DOM 中，在 DOM 的状态发生变化时，虚拟 DOM 会进行 Diff 运算，来更新只需要被替换的 DOM，而不是全部重绘。
-
在 Diff 算法中，只平层的比较前后两棵 DOM 树的节点，没有进行深度的遍历。
-
如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
-
节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
-
文本改变，直接修改文字内容。
-
移动，增加，删除子节点时：就与 v-for 中的 key 有关了
没有 key 的时候，就采用简单粗暴的方式
如果想在中间插入节点 F，简单粗暴的做法是：卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E。
如果有 key 的时候，Vue 就能根据 key，直接找到具体的位置进行操作，效率比较高
-
v-for 中的 key 值
- 作用：一方面可以提高性能，另一方面也会避免出错，通俗的说，如果没用 key ，当修改了 data 数据时，就会采用简单粗暴的方式，那么问题就来了，如果你需要插入一条数据时，这个插入的数据就会替换原来数据的位置，那么原来数据及其后面所有元素的属性也是有可能被对应数据所替换掉的，这就会引起错误。当加了 key ，Vue 就会根据 key，直接找到具体位置进行操作，就不会一起属性混乱了。
虚拟 dom 的缺点
- 任何东西都是有优点和缺点的，这取决于运用的场景是利大于弊还是反之。
- 虚拟 dom 最大的缺点就是需要在内存中维护着一份 dom 副本，在 dom 的更新速度和使用内存空间之间取得平衡