Vue中的key


key

預期:number | string

key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes。如果不使用 key,Vue 會使用一種最大限度減少動態元素並且盡可能的嘗試就地修改/復用相同類型元素的算法。而使用 key 時,它會基於 key 的變化重新排列元素順序,並且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重復的 key 會造成渲染錯誤。

最常見的用例是結合 v-for:

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

 

它也可以用於強制替換元素/組件而不是重復使用它。當你遇到如下場景時它可能會很有用:

完整地觸發組件的生命周期鈎子

觸發過渡

例如:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

 

當 text 發生改變時,<span> 總是會被替換而不是被修改,因此會觸發過渡。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM