在vue中為什么不能用index作為key

更新時(shí)間：2022年09月26日 10:00:09 作者：來碗鹽焗星球

這篇文章主要介紹了在vue中為什么不能用index作為key，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

一、key的作用是什么？

key的作用眾所周知，看一個(gè)demo就知道：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <ul id="app">
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
?
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [1, 2, 3]
                }
            }
        })
    </script>
</body>

在vue中key可以沒有，沒有也可以運(yùn)行并且不會(huì)報(bào)錯(cuò)，但是建議加上key。

另外，我們必須知道，vue中key運(yùn)用的地方------配合v-for使用。key是vue中虛擬dom標(biāo)記的唯一標(biāo)識(shí)，通過這個(gè)key，diff算法能更加準(zhǔn)確和快捷。不使用key的情況下，因?yàn)関ue的就地更新會(huì)選擇復(fù)用節(jié)點(diǎn)，之前的狀態(tài)被保存，可能會(huì)產(chǎn)生一系列的bug。另外，key的唯一性可以被map數(shù)據(jù)結(jié)構(gòu)充分利用，時(shí)間復(fù)雜度僅為o（1）。

簡(jiǎn)單來說，key是唯一標(biāo)識(shí)，為了讓diff算法更準(zhǔn)確的找到需要被對(duì)比的兩個(gè)節(jié)點(diǎn)。

二、什么是虛擬DOM？

虛擬DOM結(jié)構(gòu)就是一個(gè)對(duì)象而已，其中描述了每一層容器的特征。在beroreCreated執(zhí)行的時(shí)候，DOM樹并沒有生成。

虛擬DOM光說肯定是不可理解的，那我們就用代碼說話：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
        <div id="app">
            <ul>
                <item v-for="(num,index) in list" :key="index":num="num":class=`item${num}`></item>
            </ul>
            <button @click="change">change</button>
        </div>
?
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        list: [1, 2, 3]
                    }
                },
                methods: {
                    change() {
                        this.list.reverse()
                    }
                },
 ? ? ? ? ? ? ? ?//也可以使用原生JS添加DOM結(jié)構(gòu)，不考慮性能的時(shí)候
                components: {
                    item: {
                        props: ['num'],
                        template: `<div>{{num}}</div>`,
                        name: 'child'
                    }
                }
            })

            // let ul = document.getElementById('app');
            // for (let i = 1; i <= 3; i++) {
            //  let li = document.createElement('li');
            //  li.innerHTML = i;
            //  ul.appendChild(li);
            // }
        </script>
    </body>

先生成虛擬DOM結(jié)構(gòu)，而不是編譯：

vnode = {
 ? ?tag: 'ul',
 ? ?children: [
 ? ? ?  {
 ? ? ? ? ? ?tag: 'li',
 ? ? ? ? ? ? ? ?children: [{
 ? ? ? ? ? ? ? ? ? ?vnode: {
 ? ? ? ? ? ? ? ? ? ? ? ?text: '1'
 ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ?  }]
        },
 ? ? ?  {
 ? ? ? ? ? ?tag: 'li',
 ? ? ? ? ? ? ? ?children: [{
 ? ? ? ? ? ? ? ? ? ?vnode: {
 ? ? ? ? ? ? ? ? ? ? ? ?text: '2'
 ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ?  }]
 ? ? ?  },
 ? ? ?  {
 ? ? ? ? ? ?tag: 'li',
 ? ? ? ? ? ? ? ?children: [{
 ? ? ? ? ? ? ? ? ? ?vnode: {
 ? ? ? ? ? ? ? ? ? ? ? ?text: '3'
 ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ?  }]
 ? ? ?  },
 ?  ]
}

再將html編寫成真實(shí)的DOM結(jié)構(gòu)：

再編譯成真實(shí)DOM結(jié)構(gòu)
    <li>1</li>
    <li>2</li>
    <li>3</li>

虛擬DOM存在的意義就是，減少真實(shí)DOM結(jié)構(gòu)的操作，對(duì)于瀏覽器來說，減少開銷，提高性能。

三、什么是diff算法?

只要數(shù)據(jù)源發(fā)生變化，就一定會(huì)觸發(fā)watcher觀察者函數(shù)（Object。defineProperty（））的回調(diào)函數(shù)，去驅(qū)動(dòng)視圖更新，(加_是為了表明這是vue自帶的方法)

回調(diào)：

vm._update(vm._render()),
 _render會(huì)生成vnode
 _update會(huì)拿著vnoe去__patch__去查找不同
 __patch__中啟動(dòng)的就是diff算法

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
 ? ?<div id="app">
 ? ? ? ?<ul>
 ? ? ? ? ? ?<item v-for="(item,index) in list" :key="item.id" :num="item.num" :class=`item${item.num}`></item>
 ? ?</ul>
 ? ?<button @click="change">change</button>
</div >
 ? ?<script>
 ? ? ? ?new Vue({
 ? ? ? ? ? ?el: '#app',
 ? ? ? ?data() {
 ? ? ? ? ? ?return {
 ? ? ? ? ? ?list: [1, 2, 3]
 ? ? ?  },
 ? ? ? ?methods: {
 ? ? ? ? ? ?change() {
 ? ? ? ? ? ?this.list.reverse()
 ? ? ?  }
 ? ? ?  },
 ? ? ? ?components: {
 ? ? ? ? ? ?item: {
 ? ? ? ? ? ?props: ['num'],
 ? ? ? ?template: `<div>{{ num }}</div>`,
 ? ? ? ?name: 'child'
 ? ? ? ? ?  }
 ? ? ?  }
 ?  })
 ? ?</script>
</body >

當(dāng)點(diǎn)擊按鈕change以后，list反轉(zhuǎn)變?yōu)椋簂ist:[3,2,1]，diff算法會(huì)根據(jù)DOM樹，從上到下，從左到右判斷值是否更新。問題是，為什么diff就知道誰跟誰去進(jìn)行比對(duì)呢？這就是key的作用了，key是唯一標(biāo)識(shí)符，diff算法會(huì)根據(jù)key去比對(duì)。

四、為什么不能用index作為key？

基于前三者的知識(shí)基礎(chǔ)，我們才能更好地理解，為什么不能用index作為key？這里將通過三個(gè)demo來展示：

（1）index不能作為key--情景一

demo1：

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            <ul>
                <item v-for="(num,index) in list" :key="index" :num="num" :class=`item${num}`></item>
            </ul>
            <button @click="change">change</button>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        list: [1, 2, 3]
                    }
                },
                methods: {
                    change() {
                        this.list.reverse()
                    }
                },
                components: {
                    item: {
                        props: ['num'],
                        template: `<div>{{num}}</div>`,
                        name: 'child'
                    }
                }
            })
            
        </script>
    </body>

demo2：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        <ul>
            <item v-for="(item,index) in list" :key="item.id" :num="item.num" :class=`item${item.num}`></item>
        </ul>
        <button @click="change">change</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [{
                        id: 0,
                        num: 1
                    }, {
                        id: 1,
                        num: 2
                    }, {
                        id: 2,
                        num: 3
                    }]
                }
            },
            methods: {
                change() {
                    this.list.reverse()
                }
            },
            components: {
                item: {
                    props: ['num'],
                    template: `<div>{{num}}</div>`,
                    name: 'child'
                }
            }
        })
    </script>
</body>

demo1與demo2的區(qū)別在于，key值不一樣，demo1是index作為key，而demo2是list中的id作為key。需要注意的是，當(dāng)我們點(diǎn)擊change按鈕以后，注意觀察代碼是如何變化的：

demo1點(diǎn)擊前后變化：

demo2點(diǎn)擊前后變化：

表面上，demo1只是調(diào)換了item1和item3的位置，點(diǎn)擊后也是就改變了item1和item3；而demo2三個(gè)都改變了。這時(shí)有人就會(huì)覺得使用index作為key改動(dòng)DOM結(jié)構(gòu)還更小，豈不是更好？

實(shí)際上，眼見不一定為實(shí)。我們看看真實(shí)的樣子：

demo1的改變前后對(duì)比：

demo2改變前后對(duì)比：

是不是震驚了?。?！demo2的list實(shí)際上的key和num一一對(duì)應(yīng)著，并沒有改變，只是順序不一樣了。而demo1還改變了兩個(gè)值。所以，這就是不能使用index作為key的原因之一了。

使用index作為key，會(huì)導(dǎo)致diff中的優(yōu)化失效（降低了復(fù)用性，違背了虛擬DOM的初衷）。原本可以復(fù)用的東西，不能被復(fù)用，徒然增加了性能開銷，浪費(fèi)性能

（2）index不能作為key---情景二

接下來看看demo3，demo3將會(huì)淋漓盡致的展現(xiàn)index作為key的bug：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            <ul>
                <item v-for="(item,index) in student" :key="index"></item>
 ? ? ? ? ? ? ?  //<item v-for="(item,index) in list" :key="item.id"></item>
            </ul>
            <button @click="change">change</button>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        list: [{
                            id: 0,
                            num: 1
                        }, {
                            id: 1,
                            num: 2
                        }, {
                            id: 2,
                            num: 3
                        }],
                        student: [1, 2, 3]
                    }
                },
                methods: {
 ? ? ? ? ? ? ? ? ? ?//刪除數(shù)據(jù)
                    change() {
                        this.student.splice(0, 1)
 ? ? ? ? ? ? ? ? ? ? ? ?//this.list.splice(0, 1)
                    }
                },
                components: {
                    item: {
                        template: `<div>{{Math.random()}}</div>`,
                    }
                }
            })
        </script>
    </body>

當(dāng)刪除的時(shí)候，又會(huì)發(fā)生什么意想不到事情呢？

右圖是刪除之后的結(jié)果，驚訝的發(fā)現(xiàn)，我們刪除的明明是第一個(gè)數(shù)據(jù)，而頁面展示是刪除了第三個(gè)數(shù)據(jù)。小小的腦袋真的會(huì)有大大的疑問。但是通過虛擬DOM，你就會(huì)恍然大悟了。

當(dāng)用index作為key時(shí)，因?yàn)閐iff算法會(huì)就地更新，會(huì)復(fù)用key:0的這個(gè)節(jié)點(diǎn)，比對(duì)的時(shí)候，key:0的節(jié)點(diǎn)存在，則比對(duì)key:1，也存在，而多出了key:2,則會(huì)將其刪除。

使用index作為key時(shí)，在刪除數(shù)據(jù)時(shí)，因?yàn)関ue不會(huì)深入地區(qū)對(duì)比子組件的文本內(nèi)容，所以會(huì)錯(cuò)誤移除VDOM中的節(jié)點(diǎn)（index的值是不固定的）。

這個(gè)例子，文本內(nèi)容使用的是隨機(jī)數(shù)，所以數(shù)據(jù)對(duì)不上不必太在意。另外，既然index的值不固定，不能作為key，那么擴(kuò)展一下，可不可以使用隨機(jī)數(shù)作為key呢？答案自然是不能夠。因?yàn)閗ey值無論是刪除還是反轉(zhuǎn)，根本就不能找到相同的key，diff算法就毫無意義了，壓根沒有復(fù)用性可言。

在這個(gè)demo3里，數(shù)據(jù)源放了list這個(gè)數(shù)據(jù)，可言嘗試循環(huán)它，來對(duì)比index作為key的結(jié)果，將會(huì)更加明顯哦。

到此這篇關(guān)于在vue中為什么不能用index作為key的文章就介紹到這了,更多相關(guān)vue index key內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: