目錄

• 列表渲染 key 的原理和作用
• key的原理分析
• key的作用
• 總結

列表渲染 key 的原理和作用

key就是為該節點做身份標識，如果對key繫結index的值，那麼很容易出現問題：

1.若對資料進行：逆序新增、逆序刪除等破壞順序操作，會產生沒有必要的真實DOM更新——頁面效果沒有問題，www.cppcns.com但是效率有2問題

2.如果解構中還包含輸入類的DOM，會產生錯誤DOM更新——介面有問題

問題案例分析：

點選按鈕，在列表的前面新增一個物件

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

        var vm = new ({
            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)
                }
            },})

展現出來是這樣的一個效果

當我們將姓名填入輸入框中

然後點選按鈕，觀察出現的問題

我們會發現，表單的最上方出現了老劉，但是列表中的內容和輸入框的內容並沒有相等

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

key的原理分析

初始資料

拿到初始資料根據初始資料生成虛擬DOM將虛擬DOM轉為真實的DOM

新資料

拿到新的資料（包含老劉）根據資料生成虛擬DOM虛擬DOM與初始資料的虛擬DOM進行對比演算法（li中的文字資訊出現了差異，但是input是相同的，虛擬的DOM是沒有資料的，在頁面輸入的內容儲存在真實的DOM中）文字資訊——新資料替代了初始資料，input內容被保留

key的作用

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！