一、总结:
快速查找到节点,减少渲染次数,提升渲染性能,高效的更新虚拟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只会替换其内部属性而不会触发过渡效果。