虚拟DOM和key

vue渲染html时，会生成一个虚拟dom树，被称之为vdom，然后每次数据的更新，旧的dom树和新的dom树进行比对，然后针对性的更新。

两个dom树之间的对比，最佳的体验是深层遍历，也就是遍历每个节点，但是这种遍历是非常损耗性能的，所以现在都是浅层遍历。

也就是同层对比。

两个层级之间进行对比，如果某一项变化了，就要发生改变，这样就会导致，该层级的下一级的元素是重绘的。因为这一层重新弄了，下面的东西自然就要切断，重新生成。

而key的作用，就是对这个层级打上标识，如果有了标识，就能够判断是这个元素是不是相同的，相同的，如果只是移动了，那就不用删除重新生成，直接移动即可。

如果是相同的元素，位置发生了变化，在无key的情况下，12345五个元素，位置变化后：12435，结果会是3更新成4,4更新成3，并不会产生真实移动。

那删除的话，12345五个元素，我们删掉3，结果会是，3更新成4,4更新成5,5删除。

在有key的情况下，12435会直接移动，不会发生3更新成4，4更新成3，删除也是同理。