Vue 列表渲染 key的原理和作用詳解

更新時間：2021年10月25日 15:33:34 作者：TA_WORLD

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

列表渲染 key 的原理和作用

key就是為該節(jié)點做身份標識，如果對key綁定index的值，那么很容易出現(xiàn)問題：

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

2.如果解構(gòu)中還包含輸入類的DOM，會產(chǎn)生錯誤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 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)出來是這樣的一個效果

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

在這里插入圖片描述

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

在這里插入圖片描述

我們會發(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)為真實的DOM

新數(shù)據(jù)

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

key的作用

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

相關(guān)文章

Element Dropdown下拉菜單的使用方法
這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
electron-vue中報錯Cannot?use?import?statement?outside?a?m
Electron 是一個使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下
2023-02-02
vue 項目接口管理的實現(xiàn)
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項目接口管理，具有一定的參考價值，感興趣的小伙伴可以一起來了解一下
2019-01-01
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue項目中使用better-scroll實現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
vue實現(xiàn)自定義全局右鍵菜單
這篇文章主要為大家詳細介紹了vue實現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue+echarts圖表的基本使用步驟總結(jié)
這篇文章主要給大家介紹了關(guān)于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開源可視化圖表庫,而Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界,需要的朋友可以參考下
2023-11-11