vue v-for 绑定key后的differ过程

Question

原始数据:[{id:1,name:1},{id:2,name:2},{id:3,name:3},{id:4,name:4}]
更新数据:[{id:4,name:4},{id:3,name:3},{id:1,name:1}]
vue利用key来进行differ过程是怎样的,不带key是直接就地更新,加上key是怎么做的

Answer 1

加key 是删除节点 然后重新创建节点
不加key 是直接替换节点内容

Answer 2

1. 不绑定key,则vue不知道元素的映射关系，只能按顺序对比vnode。以简单的span元素为例例子，patch的过程是oldVnode1和newVnode1对比，dom1需要更改text，oldVnode2和oldVnode2对比等等，上诉例子中需要进行3次dom更改以及1次dom删除。
2. 绑定key，则vue知道oldVnode1应该和newVnode3对比，即只需要删除1次dom和移动1次dom。

1的优点是会尽可能复用元素，但尽可能的复用元素可能并不是最佳的优化方案。这里仅仅只是以span举例，如果还有很多children或者干脆是个component，则没有映射关系的对比，对比的目标不是你想要的目标会有多麻烦。所以除非你有自己的优化方案，否则for循环尽量用key，这也是 eslint-plugin-vue 的规范。