先說結(jié)論，推薦使用【:key="item.id"】而不是將數(shù)組下標(biāo)當(dāng)做唯一標(biāo)識(shí)，前者能做到全部復(fù)用
場景：刪除無序列表中的<li>標(biāo)簽文章來源：http://www.zghlxwxcb.cn/news/detail-834980.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-834980.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>創(chuàng)建一個(gè)Vue實(shí)例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<link rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="app">
<!--
事件：做<li>標(biāo)簽的刪除功能，根據(jù)class的id刪除，
此案例刪除class="3"的標(biāo)簽
-->
<!-- 原代碼 -->
<li class="1">1</li>
<li class="2">2</li>
<li class="3">3</li>
<li class="4">4</li>
<li class="5">5</li>
<!-- 1.使用item.id做:key唯一標(biāo)識(shí)符 -->
<!-- 刪除3后，變成 -->
<li class="1">1</li>
<li class="2">2</li>
<li class="4">4</li>
<li class="5">5</li>
<!-- vue開始將剩下的四個(gè)<li>與源代碼的五個(gè)<li>進(jìn)行匹配
使用的是diff算法對(duì)比新舊虛擬DOM
由于精準(zhǔn)刪除3,1和2直接代碼復(fù)用，4和5發(fā)現(xiàn)class和內(nèi)容均能匹配上
將class重新排列 1234
則映射出新的組合，如下：
-->
<li class="1">1</li>
<li class="2">2</li>
<li class="3">4</li>
<li class="4">5</li>
<!-- ========================================================================= -->
<!-- 2.使用index做:key唯一標(biāo)識(shí)符 -->
<!-- 刪除3后，index數(shù)組下標(biāo)會(huì)發(fā)生改變，變成 -->
<li class="1">1</li>
<li class="2">2</li>
<li class="3">4</li>
<li class="4">5</li>
<!-- Vue將內(nèi)容為4的li與內(nèi)容為3的對(duì)比，發(fā)現(xiàn)匹配不上，刪除3標(biāo)簽
再將內(nèi)容為5的li與內(nèi)容為4的對(duì)比，也匹配不上，又刪除4標(biāo)簽 -->
<!-- ========================================================================-->
<!-- 總結(jié)：使用index很多情況不能代碼復(fù)用，強(qiáng)制更新元素，影響性能 -->
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data:{
},
methods:{
}
})
</script>
</body>
</html>到了這里，關(guān)于【Vue】v-for中:key中item.id與Index使用的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
