Vue中的循環(huán)遍歷與key值原理解讀
1，v-for遍歷數組
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();數組篩選過濾
（7）arr.some（）找符合條件元素，返回布爾值。
（8）forEach
2，循環(huán)對象
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">
<!-- 遍歷數組 -->
<!-- <h2>人員列表(遍歷數組)</h2>
<ul>
v-for of 或者in 都可遍歷
<li v-for="(k,index) of Persons" :key="index">
{{k.name}}--{{k.age}}--{{index}}
</li>
</ul> -->
<!-- 遍歷對象 -->
<h2>汽車信息（遍歷對象）</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萬",
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">沒有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渲染時候會依次替換渲染，加了key會直接將其放在指定位置，加key提升效率。
3.3 拓展
（1）使用key可以提高效率，加key如果要插入f使用diff算法高效，如果使用index做key一直變，所以item如果唯一可以使用item。
（2）不加key如果要插入f依次替換。
一、什么是虛擬dom？
虛擬dom 其實就是一個普通的JavaScript對象，用來描敘試圖上有哪些界面結構，并不生成界面，我們可以在生命周期【mounted階段】打印this._vnode，如下：
它描敘了該階段是div，有 哪些子節(jié)點，哪些屬性，它是采用一個js對象來描敘這些，但是它并不會顯示在頁面上。
（3）在vue中，每一個組件都有一個render函數，這個函數會生成一個虛擬dom，這就意味著每一個組件都對應一個虛擬dom樹。
二、為什么需要虛擬dom？
這個主要是由vue結構所決定的，在vue中，渲染試圖會調用render函數，不僅在創(chuàng)建視圖的時候被調用，當組件所依賴的數據或者屬性發(fā)生了改變的時候，也會調用render函數，如果是使用真實的dom，當創(chuàng)建，修改，刪除，插入dom的話是非常消耗性能的，如下所示，當修改一個js對象遠比操作真實的dom要有效率的多。
（4）
1. 虛擬DOM中key的作用：（面試題）
key是虛擬DOM對象的標識，當數據發(fā)生變化時，Vue會根據【新數據】生成【新的虛擬DOM】,隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下：
2. 對比規(guī)則：
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
- ①.若虛擬DOM中內容沒變, 直接使用之前的真實DOM！
- ②.若虛擬DOM中內容變了, 則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key 創(chuàng)建新的真實DOM，隨后渲染到到頁面。
3. 用index作為key可能會引發(fā)的問題
1. 若對數據進行：逆序添加、逆序刪除等破壞順序操作:會產生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低。
2. 如果結構中還包含輸入類的DOM：會產生錯誤DOM更新 ==> 界面有問題。
4. 開發(fā)中如何選擇key?
1.最好使用每條數據的唯一標識作為key, 比如id、手機號、身份證號、學號等唯一值。
2.如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue計數器案例的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Electron是一個開源的框架,用于構建跨平臺的桌面應用程序,這篇文章主要介紹了前端vue項目打包成桌面端exe應用的簡單步驟,文中給出詳細的代碼示例,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了Ant Design編寫登錄和注冊頁面的教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了vue中ref()和reactive()區(qū)別小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-07-07
這篇文章主要介紹了vue中項目如何提交form格式數據的表單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue中Echarts使用動態(tài)數據的兩種實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue實現簡單數據雙向綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
本篇文章主要介紹了vue引入swiper插件的使用實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue中axios的post請求,415錯誤的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Ant design vue table 單擊行選中 勾選checkbox教程
這篇文章主要介紹了Ant design vue table 單擊行選中 勾選checkbox教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10