Vue中的循環(huán)遍歷與key值原理解讀
1，v-for遍歷數(shù)組
1.1 代碼展示案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2 v-for="(item,index) in letters" :key="index">{{item}}--{{index}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
letters: ['a', 'b', 'c', 'd', 'e']
}
}
})
</script>
</body>
</html>
1.2 循環(huán)遍歷常用方法
（1）原生for循環(huán)
（2）for in
（3）for of
（4）arr.map()加工處理
（5）arr.reduce()縮減。累加
(6) arr.filter();數(shù)組篩選過(guò)濾
（7）arr.some（）找符合條件元素，返回布爾值。
（8）forEach
2，循環(huán)對(duì)象
2.1 代碼展示案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div class="app">
<!-- 遍歷數(shù)組 -->
<!-- <h2>人員列表(遍歷數(shù)組)</h2>
<ul>
v-for of 或者in 都可遍歷
<li v-for="(k,index) of Persons" :key="index">
{{k.name}}--{{k.age}}--{{index}}
</li>
</ul> -->
<!-- 遍歷對(duì)象 -->
<h2>汽車(chē)信息（遍歷對(duì)象）</h2>
<ul>
<li v-for="(value,k) in Cart" :key="k">
{{k}}--{{value}}
</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: ".app",
data() {
return {
Persons: [
{ id: 01, name: '張三', age: 18 },
{ id: 02, name: '里三', age: 18 },
{ id: 03, name: '馬三', age: 18 },
{ id: 04, name: '劉三', age: 18 },
],
Cart: {
name: '奧迪A8',
price: "80萬(wàn)",
calor: '黑色'
}
}
},
})
</script>
</html>
3，key值原理
3.1 代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for使用key</title>
</head>
<body>
<div id="app">
<!-- 不加key如果要插入f依次改變 -->
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="add1">沒(méi)有key</button>
<!-- 加key如果要插入f使用diff算法高效,如果使用index做key一直變，所以item如果唯一可以使用item-->
<ul>
<li v-for="item in letters" :key="item">{{item}}</li>
</ul>
<button @click="add2">有key</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
letters:['a','b','c','d','e']
},
methods: {
add1(){
this.letters.splice(2,0,'f')
},
add2(){
this.letters.splice(2,0,'f')
}
}
})
</script>
</body>
</html>3.2 v-for加key與不加
不加key渲染時(shí)候會(huì)依次替換渲染，加了key會(huì)直接將其放在指定位置，加key提升效率。
3.3 拓展
（1）使用key可以提高效率，加key如果要插入f使用diff算法高效，如果使用index做key一直變，所以item如果唯一可以使用item。
（2）不加key如果要插入f依次替換。
一、什么是虛擬dom？
虛擬dom 其實(shí)就是一個(gè)普通的JavaScript對(duì)象，用來(lái)描敘試圖上有哪些界面結(jié)構(gòu)，并不生成界面，我們可以在生命周期【mounted階段】打印this._vnode，如下：
它描敘了該階段是div，有 哪些子節(jié)點(diǎn)，哪些屬性，它是采用一個(gè)js對(duì)象來(lái)描敘這些，但是它并不會(huì)顯示在頁(yè)面上。
（3）在vue中，每一個(gè)組件都有一個(gè)render函數(shù)，這個(gè)函數(shù)會(huì)生成一個(gè)虛擬dom，這就意味著每一個(gè)組件都對(duì)應(yīng)一個(gè)虛擬dom樹(shù)。
二、為什么需要虛擬dom？
這個(gè)主要是由vue結(jié)構(gòu)所決定的，在vue中，渲染試圖會(huì)調(diào)用render函數(shù)，不僅在創(chuàng)建視圖的時(shí)候被調(diào)用，當(dāng)組件所依賴的數(shù)據(jù)或者屬性發(fā)生了改變的時(shí)候，也會(huì)調(diào)用render函數(shù)，如果是使用真實(shí)的dom，當(dāng)創(chuàng)建，修改，刪除，插入dom的話是非常消耗性能的，如下所示，當(dāng)修改一個(gè)js對(duì)象遠(yuǎn)比操作真實(shí)的dom要有效率的多。
（4）
1. 虛擬DOM中key的作用：（面試題）
key是虛擬DOM對(duì)象的標(biāo)識(shí)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】,隨后Vue進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下：
2. 對(duì)比規(guī)則：
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
- ①.若虛擬DOM中內(nèi)容沒(méi)變, 直接使用之前的真實(shí)DOM！
- ②.若虛擬DOM中內(nèi)容變了, 則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key 創(chuàng)建新的真實(shí)DOM，隨后渲染到到頁(yè)面。
3. 用index作為key可能會(huì)引發(fā)的問(wèn)題
1. 若對(duì)數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破壞順序操作:會(huì)產(chǎn)生沒(méi)有必要的真實(shí)DOM更新 ==> 界面效果沒(méi)問(wèn)題, 但效率低。
2. 如果結(jié)構(gòu)中還包含輸入類(lèi)的DOM：會(huì)產(chǎn)生錯(cuò)誤DOM更新 ==> 界面有問(wèn)題。
4. 開(kāi)發(fā)中如何選擇key?
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key, 比如id、手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯一值。
2.如果不存在對(duì)數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒(méi)有問(wèn)題的。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)計(jì)數(shù)器案例
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)數(shù)器案例的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡(jiǎn)單步驟
Electron是一個(gè)開(kāi)源的框架,用于構(gòu)建跨平臺(tái)的桌面應(yīng)用程序,這篇文章主要介紹了前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡(jiǎn)單步驟,文中給出詳細(xì)的代碼示例,需要的朋友可以參考下2025-06-06
Ant Design編寫(xiě)登錄和注冊(cè)頁(yè)面的教程
這篇文章主要介紹了Ant Design編寫(xiě)登錄和注冊(cè)頁(yè)面的教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue中ref()和reactive()區(qū)別小結(jié)
本文主要介紹了vue中ref()和reactive()區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue中Echarts使用動(dòng)態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
本篇文章主要介紹了vue引入swiper插件的使用實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue中axios的post請(qǐng)求,415錯(cuò)誤的問(wèn)題
這篇文章主要介紹了vue中axios的post請(qǐng)求,415錯(cuò)誤的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Ant design vue table 單擊行選中 勾選checkbox教程
這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10