Vue進階（幺伍零）：Vue key應用
當 Vue.js 用v-for正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。
key的兩種應用場景
在列表渲染時使用key屬性
假設Vue實例的data屬性中有一個叫numbers的變量，它的值是[1, 2, 3, 7, 8, 9]：
{{num}}
1
2
3
這種情況下應當是渲染了6個
元素，其中的內容分別對應numbers中6個數字，此時如果numbers變成了[0, 1, 2, 3, 7, 8, 9]，即在數組頭部插入了一個數字0，在沒有key屬性的情況下，渲染輸出的更新步驟是這樣的：
原先內容為1的
元素內容變成0，原先內容為2的
元素內容變成1，……以此類推，最后新增一個
元素，內容為9。
在這種情況下，Vue會通過改變原來元素的內容和增加/減少元素來完成這個改變，因為沒有key屬性，Vue無法跟蹤每個節點，只能通過這樣的方法來完成變更。
讓我們對以上代碼進行一個小修改：
{{num}}
1
2
3
這里用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取值不建議使用index,原因詳參《Vue進階（幺伍幺）：Vue 應用key提升頁面渲染性能》。
使用key屬性強制替換元素
key屬性還有另外一種使用方法，即強制替換元素，從而可以觸發組件的生命周期鉤子或者觸發過渡。因為當key改變時，Vue認為一個新的元素產生了，從而會新插入一個元素來替換掉原有的元素。
借用官方文檔上的例子：
1
2
3
這里如果text發生改變，整個元素會發生更新，因為當text改變時，這個元素的key屬性就發生了改變，在渲染更新時，Vue會認為這里新產生了一個元素，而老的元素由于key不存在了，所以會被刪除，從而觸發了過渡。
假如沒有key屬性：
1
2
3
那么當text改變時，Vue會復用元素，只改變元素的內容，而不會有新的元素被添加進來，也不會有舊的元素被刪除。
同理，key屬性被用在組件上時，當key改變時會引起新組件的創建和原有組件的刪除，此時組件的生命周期鉤子就會被觸發。
Vue 渲染
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章