Vue中key的具體使用
更新時(shí)間：2024年06月12日 09:34:14 作者：ruleslol
在vue中,key是dom對象的標(biāo)識,本文主要介紹了Vue中key的具體使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、v-for中key的作用
給節(jié)點(diǎn)進(jìn)行一個(gè)標(biāo)識，類似于身份證號。
1-1、需求1：
點(diǎn)擊按鈕，在<li>的最前面添加一個(gè)老劉的信息
<body>
<div id="root">
<h1>人員信息</h1>
<button @click.once="add">點(diǎn)擊添加老王</button>
<ul>
<li v-for="(p, index) in persons" ::key="index">
{{p.name}}-{{p.age}}
<input type="text">
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{id:'001', name:'張三', age: 18},
{id:'002', name:'李四', age: 20},
{id:'003', name:'王五', age: 10}
]
},
methods: {
add(){
const p = {id:'004', name:'老王', age: 40};
// 將數(shù)據(jù)往數(shù)組前面加
this.persons.unshift(p);
}
},
})
</script>
</body>因?yàn)?，key被vue內(nèi)部在用。
1-2、key="index"的問題：
1、效率不高
2、文本框錯(cuò)亂
1-3、遍歷列表的時(shí)候key的作用
用戶操作的都是真實(shí)的DOM。
虛擬DOM做對比算法的時(shí)候，拿的是兩邊的key做的對比。
若是將老王加在王五的后面，則不存在該問題。
所以，當(dāng)對數(shù)據(jù)進(jìn)行了破壞順序的操作時(shí)，key="index"有問題！
張三、李四、王五都是新生成的，不是從左邊已經(jīng)生成的真實(shí)DOM中復(fù)用的，所以效率低
1-4、解決方式：key="p.id"
1-5、v-for遍歷沒有key
當(dāng)v-for遍歷沒有key的時(shí)候，vue自動將遍歷時(shí)候的索引值（index）作為key了。
二、小結(jié)
到此這篇關(guān)于Vue中key的具體使用的文章就介紹到這了,更多相關(guān)Vue key內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)搜索關(guān)鍵字高亮功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Vue.js是構(gòu)建Web界面的漸進(jìn)式JavaScript框架,通過簡潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),這篇文章主要給大家介紹了關(guān)于Vue.js中讓人容易忽略的API的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue項(xiàng)目全局配置頁面緩存之按需讀取緩存的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目全局配置頁面緩存之實(shí)現(xiàn)按需讀取緩存的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧2018-08-08
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue項(xiàng)目運(yùn)行或打包時(shí),頻繁內(nèi)存溢出情況問題
這篇文章主要介紹了vue項(xiàng)目運(yùn)行或打包時(shí)，頻繁內(nèi)存溢出情況的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
ElementUI中el-form組件的rules參數(shù)舉例詳解
Form組件提供了表單驗(yàn)證的功能,只需要通過rules屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的prop屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于ElementUI中el-form組件的rules參數(shù)的相關(guān)資料,需要的朋友可以參考下2023-10-10
本文主要介紹了vue 防止多次點(diǎn)擊，可以有效防止惡意點(diǎn)擊，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue fetch中的.then()的正確使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04