Vue v-for中:key中item.id與Index使用的區(qū)別解析

更新時間：2024年02月21日 11:07:23 作者：Oneforlove_twoforjob

這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標當做唯一標識,前者能做到全部復用,本文給大家詳細講解,感興趣的朋友跟隨小編一起看看吧

先說結論，推薦使用【:key="item.id"】而不是將數(shù)組下標當做唯一標識，前者能做到全部復用

場景：刪除無序列表中的<li>標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>創(chuàng)建一個Vue實例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link  rel="external nofollow"  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>標簽的刪除功能，根據(jù)class的id刪除，
                    此案例刪除class="3"的標簽
             -->
            <!-- 原代碼 -->
            <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唯一標識符 -->
            <!-- 刪除3后，變成 -->
            <li class="1">1</li>
            <li class="2">2</li>
            <li class="4">4</li>
            <li class="5">5</li>
            <!-- vue開始將剩下的四個<li>與源代碼的五個<li>進行匹配
                使用的是diff算法對比新舊虛擬DOM
                由于精準刪除3,1和2直接代碼復用，4和5發(fā)現(xiàn)class和內容均能匹配上
                將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唯一標識符 -->
            <!-- 刪除3后，index數(shù)組下標會發(fā)生改變，變成 -->
            <li class="1">1</li>
            <li class="2">2</li>
            <li class="3">4</li>
            <li class="4">5</li>
            <!-- Vue將內容為4的li與內容為3的對比，發(fā)現(xiàn)匹配不上，刪除3標簽
            再將內容為5的li與內容為4的對比，也匹配不上，又刪除4標簽 -->
<!--  ========================================================================-->
            <!-- 總結：使用index很多情況不能代碼復用，強制更新元素，影響性能 -->
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
            },
            methods:{
            }
        })
    </script>
</body>
</html>

到此這篇關于Vue v-for中:key中item.id與Index使用的區(qū)別的文章就介紹到這了,更多相關vue item.id與Index使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: