Vue中key屬性的作用

在列表渲染時使用key屬性

使用key屬性強制替換元素

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

當 vue.js 用v-for正在更新已渲染過的元素列表時，它預設用「就地復用」策略。如果資料項的順序被改變，vue 將不會移動 dom

元素來匹配資料項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素

}

種情況下應當是渲染了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屬性，這樣可以提高列表渲染的效率，提高了頁面的效能。

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

借用官方文件上的例子：

}

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

假如沒有key屬性：

}

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

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

vue中key屬性的作用

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

vue中key的作用

v for中為什麼要加key呢，這裡我給大家舉個栗子 沒有key text v model name add 新增 button div for item,i in list checkbox li ul 建立 vue 例項，得到 viewmodel var vm newvue methods th...

Vue中key的作用

相信大多數vue開發者接觸到key屬性的時候是使用v for進行列表渲染的時候，如果不使用key屬性，vue會產生警告，那麼在這個時候key屬性的作用是什麼呢？官方文件中說 當 vue.js 用v for正在更新已渲染過的元素列表時，它預設用 就地復用 策略。如果資料項的順序被改變，vue 將不會移...