溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue如何使用key來(lái)優(yōu)化v-for循環(huán)

發(fā)布時(shí)間：2022-03-19 14:22:47 來(lái)源：億速云 閱讀：401 作者：小新 欄目：開(kāi)發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)vue如何使用key來(lái)優(yōu)化v-for循環(huán)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

使用 key 來(lái)優(yōu)化 v-for 循環(huán)

v-for 是 Vue 提供的基于源數(shù)據(jù)多次渲染元素或模板塊的指令。正因?yàn)槭菙?shù)據(jù)驅(qū)動(dòng)，所以在修改列表數(shù)據(jù)的時(shí)候，Vue 內(nèi)部會(huì)根據(jù) key 值去判斷某個(gè)值是否被修改，其會(huì)重新渲染修改后的值，否則復(fù)用之前的元素。

這里如果數(shù)據(jù)中存在唯一表示 id，則推薦使用 id 作為 key，如果沒(méi)有則可以使用數(shù)組的下標(biāo) index 作為 key。因?yàn)槿绻跀?shù)組中間插入值，其之后的 index 會(huì)發(fā)生改變，即使數(shù)據(jù)沒(méi)變 Vue 也會(huì)進(jìn)行重新渲染，所以最好的辦法是使用數(shù)組中不會(huì)變化且唯一的那一項(xiàng)作為 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>

關(guān)于“vue如何使用key來(lái)優(yōu)化v-for循環(huán)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手