Vue 中使用 v-for 为何要绑定 key?

一、总结：

快速查找到节点，减少渲染次数，提升渲染性能，高效的更新虚拟DOM。

二、分析理解：

1、绑定 index

之前的数据                        之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 插入的数据  // 更新
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2 // 更新
                                 key: 3  index: 3 name: test3 // 更新

// 如果在最后面插入一条数据，那倒没影响，前面的正常复用，只更新插入到最后的那条数据。
// 但是，如果在中间插入一条数据，如上
// 明明只是插入了一条数据,却要重新渲染三条数据。

2、绑定元素 id

之前的数据                             之后的数据

key:1  id: 1  index:0  name: test1    key:1  id: 1  index:0  name: test1
key:2  id: 2  index:1  name: test2    key:4  id: 4  index:1  name: 插队数据 //更新
key:3  id: 3  index:2  name: test3    key:2  id: 2  index:2  name: test2
                                      key:3  id: 3  index:3  name: test3

// 现在对比发现只有一条数据变化了,
// 只要重新渲染 id为4 的那条数据数据就可以了,其他都是就复用之前的。

总结，最好绑定元素的 id。

另外Vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则Vue只会替换其内部属性而不会触发过渡效果。