欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • vue :src 文件路徑錯誤問題的解決方法

    vue :src 文件路徑錯誤問題的解決方法

    這篇文章主要介紹了vue :src 文件路徑錯誤問題的簡單解決方法,本文分步驟給大家介紹的非常詳細,感興趣的朋友跟隨腳本之家小編一起學習吧
    2018-05-05
  • vue后臺管理添加多語言功能的實現(xiàn)示例

    vue后臺管理添加多語言功能的實現(xiàn)示例

    這篇文章主要介紹了vue后臺管理添加多語言功能的實現(xiàn)示例,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • 在 Vue 中編寫 SVG 圖標組件的方法

    在 Vue 中編寫 SVG 圖標組件的方法

    這篇文章主要介紹了在 Vue 中編寫 SVG 圖標組件的方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • vue多頁面項目中路由使用history模式的方法

    vue多頁面項目中路由使用history模式的方法

    這篇文章主要介紹了vue多頁面項目中路由如何使用history模式,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • 淺談vue引用靜態(tài)資源需要注意的事項

    淺談vue引用靜態(tài)資源需要注意的事項

    今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue3頁面組件中怎么獲取上一個頁面的路由地址

    vue3頁面組件中怎么獲取上一個頁面的路由地址

    這篇文章主要給大家介紹了關(guān)于vue3頁面組件中怎么獲取上一個頁面的路由地址的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-02-02
  • Vue-router 報錯NavigationDuplicated的解決方法

    Vue-router 報錯NavigationDuplicated的解決方法

    這篇文章主要介紹了Vue-router 報錯NavigationDuplicated的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • 利用Vue.js實現(xiàn)求職在線之職位查詢功能

    利用Vue.js實現(xiàn)求職在線之職位查詢功能

    Vue.js是當下很火的一個JavaScript MVVM庫,它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。下面這篇文章主要給大家介紹了關(guān)于利用Vue.js實現(xiàn)求職在線之職位查詢功能的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-07-07
  • vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與'insertBefore'分析

    vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與&

    這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • vue如何獲取點擊事件源的方法

    vue如何獲取點擊事件源的方法

    本篇文章主要介紹了vue如何獲取點擊事件源的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08

最新評論