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ù)組篩選過濾
（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">
<!-- 遍歷數(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> -->
<!-- 遍歷對象 -->
<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對象，用來描敘試圖上有哪些界面結(jié)構(gòu)，并不生成界面，我們可以在生命周期【mounted階段】打印this._vnode，如下：
它描敘了該階段是div，有 哪些子節(jié)點，哪些屬性，它是采用一個js對象來描敘這些，但是它并不會顯示在頁面上。
（3）在vue中，每一個組件都有一個render函數(shù)，這個函數(shù)會生成一個虛擬dom，這就意味著每一個組件都對應(yīng)一個虛擬dom樹。
二、為什么需要虛擬dom？
這個主要是由vue結(jié)構(gòu)所決定的，在vue中，渲染試圖會調(diào)用render函數(shù)，不僅在創(chuàng)建視圖的時候被調(diào)用，當(dāng)組件所依賴的數(shù)據(jù)或者屬性發(fā)生了改變的時候，也會調(diào)用render函數(shù)，如果是使用真實的dom，當(dāng)創(chuàng)建，修改，刪除，插入dom的話是非常消耗性能的，如下所示，當(dāng)修改一個js對象遠(yuǎn)比操作真實的dom要有效率的多。
（4）
1. 虛擬DOM中key的作用：（面試題）
key是虛擬DOM對象的標(biāo)識，當(dāng)數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】,隨后Vue進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下：
2. 對比規(guī)則：
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key：
- ①.若虛擬DOM中內(nèi)容沒變, 直接使用之前的真實DOM！
- ②.若虛擬DOM中內(nèi)容變了, 則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key 創(chuàng)建新的真實DOM，隨后渲染到到頁面。
3. 用index作為key可能會引發(fā)的問題
1. 若對數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破壞順序操作:會產(chǎn)生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低。
2. 如果結(jié)構(gòu)中還包含輸入類的DOM：會產(chǎn)生錯誤DOM更新 ==> 界面有問題。
4. 開發(fā)中如何選擇key?
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識作為key, 比如id、手機(jī)號、身份證號、學(xué)號等唯一值。
2.如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)圖書管理，分享了圖書管理demo用的知識點，以及遇到問題的總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue項目使用微信公眾號支付總結(jié)，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)的5種方式及擴(kuò)展,在Vue中路由是一種用于導(dǎo)航和管理頁面之間跳轉(zhuǎn)的機(jī)制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以參考下2023-11-11
Vue如何實現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實現(xiàn)混合圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue?列表過濾與排序的實現(xiàn)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下2022-05-05
VUE對Storage的過期時間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對Storage的過期時間設(shè)置,及增刪改查方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本篇文章主要介紹了詳解vue-cli多頁面工程實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03