vue 数据变化更新视图原理之 vdom（虚拟dom）、vnode（虚拟节点）、 diff算法、为什么不能用index作为key?

vdom,diff算法
首先虚拟dom（vdom）是根据数据记录的js对象。
对象由 key： value 组成，
比如
001： 小张，(vnode)
002：小五；(vnode)
虚拟节点（vnode）必须唯一，用key做标识。

diff算法的原理是：
当数据发生变化时，根据新数据生成【新虚拟dom】，与 【旧虚拟dom】做对比。

1. 在【旧虚拟dom】找到了与【新虚拟dom】相同的key：

• 值相同，则使用之前的真实dom(视图节点)。
• 值不同，生成新的真实dom，替换之前的真实dom（DOM更新）

2. 在【旧虚拟dom】没有找到【新虚拟dom】中的key：

• 创建新的真实dom，渲染到页面。

【旧虚拟dom】
001： 小张，
002：小五；

【新虚拟dom】
001： 小张 // 使用之前的真实dom(视图节点)
002： 小四 // 生成新的真实dom，替换之前的真实dom（DOM更新）
003 ： 新的 // 创建新的真实dom，渲染到页面。

为什么不能用index作为key?
结合前面的规则看个示例：
假设有数组[A, B, C] 用index作为key

【旧虚拟dom】
index value
0 A
1 B
2 C

这时数据变化，向数组开头插入F, 数据变成 [F, A, B, C]

【新虚拟dom】
index value
0 F
1 A
2 B
3 C

看，原本A,B,C的index都变了，根据diff算法，4条数据都要做dom更新（预期是只更新1条），造成不必要的性能开销。
结论：
1 、如果需要对数组数据逆序添加、删除破坏数组中index与数据对应关系的操作时，不能用index作为key。
2、如果不需要对数组数据逆序添加、删除操作（可在末尾添加、删除），用index作为key是没问题的。