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