舉個例子：
沒有key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '呂不韋' },
{ id: 3, name: '嬴政' }
]
},
methods: {
add() {
//注意這里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>
當選中呂不為時弥喉，添加楠楠后選中的確是李斯郁竟，并不是我們想要的結果玛迄，我們想要的是當添加楠楠后，一種選中的是呂不為
3I0U9NL2I2LJVV}TOR20EYL.png
添加元素之后棚亩，本來選中的是呂不韋蓖议，結果變成了李斯
因為元素是先加載到虛擬DOM中虏杰，然后再渲染到DOM，這個渲染的過程中要用到Diff算法
勒虾，首先對比兩者有什么不同纺阔，然后把不同的元素添加到DOM中，按正常思路如果插入了一個元素應該是直接在插入的位置新建一個元素修然，但是diff算法默認是把添加元素的位置之后的元素全部向下移一格笛钝，而不是直接插入，所以元素的對應關系就出現(xiàn)了問題愕宋。具體思路：https://www.bilibili.com/video/av59594689?p=37
