溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關vue如何使用key來優化v-for循環，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
使用 key 來優化 v-for 循環
v-for 是 Vue 提供的基于源數據多次渲染元素或模板塊的指令。正因為是數據驅動，所以在修改列表數據的時候，Vue 內部會根據 key 值去判斷某個值是否被修改，其會重新渲染修改后的值，否則復用之前的元素。
這里如果數據中存在唯一表示 id，則推薦使用 id 作為 key，如果沒有則可以使用數組的下標 index 作為 key。因為如果在數組中間插入值，其之后的 index 會發生改變，即使數據沒變 Vue 也會進行重新渲染，所以最好的辦法是使用數組中不會變化且唯一的那一項作為 key 值。例如：
<template>
<ul>
<li v-for="(item, index) in arr" :key="item.id">{{ item.data }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
arr: [
{
id: 1,
data: 'a'
},
{
id: 2,
data: 'b'
},
{
id: 3,
data: 'c'
}
]
}
}
}
</script>關于“vue如何使用key來優化v-for循環”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
