Vue中key的作用

相信大多數vue開發者接觸到key屬性的時候是使用v-for進行列表渲染的時候，如果不使用key屬性，vue會產生警告，那麼在這個時候key屬性的作用是什麼呢？

官方文件中說：

當 vue.js 用v-for正在更新已渲染過的元素列表時，它預設用「就地復用」策略。如果資料項的順序被改變，vue 將不會移動 dom 元素來匹配資料項的順序，而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。

假設vue例項的data屬性中有乙個叫numbers的變數，它的值是[1, 2, 3, 7, 8, 9]：

這種情況下應當是渲染了6個元素，其中的內容分別對應numbers中6個數字，此時如果numbers變成了[0, 1, 2, 3, 7, 8, 9]，即在陣列頭部插入了乙個數字0，在沒有key屬性的情況下，渲染輸出的更新步驟是這樣的：

原先內容為1的元素內容變成0，原先內容為2的元素內容變成1，……以此類推，最後新增乙個元素，內容為9。

在這種情況下，vue會通過改變原來元素的內容和增加/減少元素來完成這個改變，因為沒有key屬性，vue無法跟蹤每個節點，只能通過這樣的方法來完成變更。

讓我們對以上**進行乙個小修改：

————————————————

我這裡用index變數，根據列表渲染的規則，它實際上對應了陣列中每個元素的索引，這樣做的好處是它可以使得每個元素的key值都不同，這是很重要的，如果我們要利用key屬性的優點，必須保證同一父元素的所有子元素有不同的key屬性。

此時如果numbers從[1, 2, 3, 7, 8, 9]變成了[0, 1, 2, 3, 7, 8, 9]，渲染輸出的更新步驟就變化了：

新增乙個元素，它的內容為0，並將它插入原先內容為1的元素之前。

在有了key屬性之後，vue會記住元素們的順序，並根據這個順序在適當的位置插入/刪除元素來完成更新，這種方法比沒有key屬性時的就地復用策略效率更高。

總體來說，當使用列表渲染時，永遠新增key屬性，這樣可以提高列表渲染的效率，提高了頁面的效能。

使用key屬性強制替換元素

key屬性還有另外一種使用方法，即強制替換元素，從而可以觸發元件的生命週期鉤子或者觸發過渡。因為當key改變時，vue認為乙個新的元素產生了，從而會新插入乙個元素來替換掉原有的元素。

借用官方文件上的例子：

這裡如果text發生改變，整個元素會發生更新，因為當text改變時，這個元素的key屬性就發生了改變，在渲染更新時，vue會認為這裡新產生了乙個元素，而老的元素由於key不存在了，所以會被刪除，從而觸發了過渡。

假如沒有key屬性：

那麼當text改變時，vue會復用元素，只改變元素的內容，而不會有新的元素被新增進來，也不會有舊的元素被刪除。

同理，key屬性被用在元件上時，當key改變時會引起新元件的建立和原有元件的刪除，此時元件的生命週期鉤子就會被觸發。