    <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)出來是這樣的一個(gè)效果

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

在這里插入圖片描述

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

在這里插入圖片描述

我們會(huì)發(fā)現(xiàn)，表單的最上方出現(xiàn)了老劉，但是列表中的內(nèi)容和輸入框的內(nè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是沒有數(shù)據(jù)的，在頁面輸入的內(nèi)容存儲(chǔ)在真實(shí)的DOM中）文本信息——新數(shù)據(jù)替代了初始數(shù)據(jù)，input內(nèi)容被保留