這篇文章主要介紹了key在Vue列表渲染時(shí)的原理和作用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

列表渲染 key 的原理和作用

key就是為該節(jié)點(diǎn)做身份標(biāo)識(shí)，如果對(duì)key綁定index的值，那么很容易出現(xiàn)問(wèn)題：

1.若對(duì)數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破壞順序操作，會(huì)產(chǎn)生沒(méi)有必要的真實(shí)DOM更新——頁(yè)面效果沒(méi)有問(wèn)題，但是效率有2問(wèn)題

2.如果解構(gòu)中還包含輸入類(lèi)的DOM，會(huì)產(chǎn)生錯(cuò)誤DOM更新——界面有問(wèn)題

問(wèn)題案例分析：

點(diǎn)擊按鈕，在列表的前面添加一個(gè)對(duì)象

    <div id="root">
        <button @click.once="add">添加一個(gè)老劉</button>
        <ul>
            <li v-for="(p, index) in persons" :key="index">
                {{p.name}}---{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001", name:"張三", age:15},
                    {id:"002", name:"李四", age:16},
                    {id:"003", name:"王五", age:17}
                ]
            },
            methods: {
                add(){
                    const p = {id:"004", name:"老劉", age:20}
                    this.persons.unshift(p)
                }
            },
        })

展現(xiàn)出來(lái)是這樣的一個(gè)效果

當(dāng)我們將姓名填入輸入框中

在這里插入圖片描述

然后點(diǎn)擊按鈕，觀察出現(xiàn)的問(wèn)題

在這里插入圖片描述

我們會(huì)發(fā)現(xiàn)，表單的最上方出現(xiàn)了老劉，但是列表中的內(nèi)容和輸入框的內(nèi)容并沒(méi)有相等

解決方法:我們將:key="index"改為:key="id"

key的原理分析

在這里插入圖片描述

初始數(shù)據(jù)

拿到初始數(shù)據(jù)根據(jù)初始數(shù)據(jù)生成虛擬DOM將虛擬DOM轉(zhuǎn)為真實(shí)的DOM

新數(shù)據(jù)

拿到新的數(shù)據(jù)（包含老劉）根據(jù)數(shù)據(jù)生成虛擬DOM虛擬DOM與初始數(shù)據(jù)的虛擬DOM進(jìn)行對(duì)比算法（li中的文本信息出現(xiàn)了差異，但是input是相同的，虛擬的DOM是沒(méi)有數(shù)據(jù)的，在頁(yè)面輸入的內(nèi)容存儲(chǔ)在真實(shí)的DOM中）文本信息——新數(shù)據(jù)替代了初始數(shù)據(jù)，input內(nèi)容被保留