Virtual DOM 也就是虚拟DOM 是一种编程概念 虚拟DOM是一颗虚拟JS对象树 它就是模拟真实DOM 把真实DOM模拟成了一个一个的js对象 并且以树形结构的方式 保存在内存中
虚拟DOM实现的流程:
1. 首先就是对初始化创建的页面进行分析然后创建出一个js对象格式的虚拟DOM树
2. 然后再进一步根据虚拟DOM生成真实DOM然后渲染到页面中
3. 如果后续DOM节点发生改变(例如删除修改等) 则会生成一颗全新的js对象格式的虚拟DOM树
4. 然后会去和上一次生成的树进行diff算法比较 比较出有哪些不同 然后生成一个只有不同元素信息的patch
5. 然后再将这个patch 传递给真实DOM进行针对性的修改 然后再将修改后的页面渲染到屏幕中
diff与key之间的关系在于 虚拟DOM通过设置key值的方式 在需要diff比较节点差异的时候 可以更快更准确的找到DOM节点
所以在这里key值不能设置为index 因为设置index的话 如果我们删除了一个元素则所有的index都发生了变化就会造成影响 所以一般设置的key值应该都是唯一的