一、引入問題

語法： key屬性 = "唯一值"

作用：給列表項添加的唯一標識。便于Vue進行列表項的正確排序復用。

為什么加key：Vue 的默認行為會嘗試原地修改元素（就地復用）

以小黑的書架案例為例，如果點擊了第一個元素的刪除按鈕，我們就會認為第一本書就會從頁面中移除

但是大家腦海中的效果是加了key的效果。

如下圖，點擊第一個帶有背景色的li，刪除后第一個li還在。由此可見這個li壓根沒動，動的是里面的文字內容。

---

二、分析問題

當我們加了key，可以理解為給列表的每個li都加了一個唯一標識，當我點擊刪除的時候確實數據中把這一項刪了，但是由于我給每個key都加了一個唯一標識，所以當我發現數據中剩下這三項，此時它就可以非常精準的定位到頁面中剩下的其實是下面這三個li是我需要的，而第一個li實際上不存在了。

如果沒加key，官網有這么一句話：v-for的默認行為會嘗試原地修改元素（就地復用）

如果不加key，就相當于把最后一個刪除了，而其他的都是原地修改標簽里的值。

實例代碼：

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">刪除</button></li>
</ul>

注意：

1. key 的值只能是字符串 或 數字類型
2. key 的值必須具有唯一性
3. 推薦使用 id 作為 key（唯一），不推薦使用 index 作為 key（會變化，不對應）