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>汽車信息（遍歷對(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)中還包含輸入類的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)圖書(shū)管理demo詳解
這篇文章主要介紹了vue實(shí)現(xiàn)圖書(shū)管理，分享了圖書(shū)管理demo用的知識(shí)點(diǎn)，以及遇到問(wèn)題的總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)及遇到的坑
這篇文章主要介紹了vue項(xiàng)目使用微信公眾號(hào)支付總結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)的5種方式及擴(kuò)展,在Vue中路由是一種用于導(dǎo)航和管理頁(yè)面之間跳轉(zhuǎn)的機(jī)制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以參考下2023-11-11
Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)混合圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue?列表過(guò)濾與排序的實(shí)現(xiàn)
這篇文章主要介紹了Vue?列表過(guò)濾與排序的實(shí)現(xiàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05
VUE對(duì)Storage的過(guò)期時(shí)間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對(duì)Storage的過(guò)期時(shí)間設(shè)置,及增刪改查方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
本篇文章主要介紹了詳解vue-cli多頁(yè)面工程實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03