Vue 列表渲染 key的原理和作用詳解
列表渲染 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-router 報錯NavigationDuplicated的解決方法
這篇文章主要介紹了Vue-router 報錯NavigationDuplicated的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報錯關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細,需要的朋友可以參考下2022-10-10