作用：給節點做一個標識，相當於人類的身份證號,虛擬DOM中的標識
下列是key值的一些使用場景和帶來的問題：
js:
const vm = new Vue({
el: '#root',
data: {
persons: [
{ id: 001, name: '小盧', age: 18 },
{ id: 002, name: '小劉', age: 19 },
{ id: 003, name: '小胡', age: 20 },
]
},
methods: {
add() {
const t = { id: 004, name: '小王', age: 40 };
this.persons.unshift(t)
}
},
})
html:
第一種情況：將key的值設為index索引,這也是如果你不設置單獨的key時,Vue默認將index索引作為key的值
<div id="root">
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} <input type="text">
</li>
<button @click="add">添加一個小王</button>
</ul>
</div>
運行流程:初始數據=>虛擬數據=>真實DOM=>按鈕后的新數據=>虛擬新數據=>虛擬進行diff對比算法=>新Dom
后果：如第一種情況如果你在真實dom中輸入了值就會出現對應出錯的問題.因為在diff對比中，輸入類的DOM是一樣的，
diff就會將原來的DOM復制過來直接渲染在頁面上。然后會打亂diff復制的算法，使后面的dom都需要重新從虛擬DOM里面轉為真實DOM,使效率變低
總結：如果你對數據進行逆向添加，逆序刪除等操作，就會產生沒必要的DOM更新
如果結構中還包含輸入類的DOM,會產生頁面有問題