Vue 列表渲染 key的原理和作用詳解
列表渲染 key 的原理和作用
key就是為該節(jié)點(diǎn)做身份標(biāo)識(shí)，如果對(duì)key綁定index的值，那么很容易出現(xiàn)問題：
1.若對(duì)數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破壞順序操作，會(huì)產(chǎn)生沒有必要的真實(shí)DOM更新——頁面效果沒有問題，但是效率有2問題
2.如果解構(gòu)中還包含輸入類的DOM，會(huì)產(chǎn)生錯(cuò)誤DOM更新——界面有問題
問題案例分析：
點(diǎn)擊按鈕，在列表的前面添加一個(gè)對(duì)象
<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)容被保留
key的作用
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?m
Electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
vue 項(xiàng)目接口管理的實(shí)現(xiàn)
在vue開發(fā)中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項(xiàng)目接口管理，具有一定的參考價(jià)值，感興趣的小伙伴可以一起來了解一下2019-01-01
Vue3+Vite中不支持require的方式引入本地圖片的解決方案
這篇文章主要介紹了Vue3+Vite中不支持require的方式引入本地圖片的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue3模塊創(chuàng)建runtime-dom源碼解析
這篇文章主要為大家介紹了vue3模塊創(chuàng)建runtime-dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義全局右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開源可視化圖表庫,而Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界,需要的朋友可以參考下2023-11-11