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> 總是會被替換而不是被修改,因此會觸發過渡。