前言

在電商項(xiàng)目的開發(fā)中，會用到這樣一個問題：商品的陳列我們?nèi)绻褂迷膉s會顯得十分臃腫。但是在Vue中，我們可以直接使用列表渲染來實(shí)現(xiàn)這樣的效果。

1. v-for

v-for指令用于渲染一個列表，它接受一個數(shù)組或者對象，然后使用一個模板來渲染每個元素。

v-for指令需要使用item in items的語法，其中items是源數(shù)據(jù)數(shù)組，而item則是被迭代的數(shù)組元素的別名。

在vue中，使用v-for指令不僅可以渲染數(shù)組，還可以渲染對象。當(dāng)使用v-for渲染對象時，它會遍歷對象的屬性名。

1.1 數(shù)組

這里我們使用一個數(shù)組來渲染一個列表。

<div id="app">
    <ul>
        <li v-for="item in items">{{item}}</li>
    </ul>

在上面我們寫了一個ul標(biāo)簽，然后使用v-for指令來渲染一個數(shù)組。這里我們使用了item in items的語法，其中items是源數(shù)據(jù)數(shù)組，而item則是被迭代的數(shù)組元素的別名。

    var vm = new Vue({
        el: '#app',
        data: {
            items: [
                11,22,33
            ],
        }
    });

渲染結(jié)果：

當(dāng)然在使用v-for來遍歷數(shù)組的時候，還可以添加另外一個屬性。這里我們使用index作為數(shù)組的索引。

<div id="app">
    <ul>
        <li v-for="(item,index) in items">{{index}}:{{item}}</li>
    </ul>

渲染結(jié)果：

tips：

記得兩個屬性之間要添加逗號。

1.2 對象

前面我們看了數(shù)組的渲染，那么我們也可以使用v-for來渲染對象。

<div id="app">
    <ul>
        <li v-for="(value,key,index) in object">{{index}}:{{key}}:{{value}}</li>
    </ul>

    var vm = new Vue({
        el:'#app',
        data:{
            obj:{
                name:'張三',
                age:18，
            }
        },
    });

結(jié)果如下：

在遍歷對象的時候，我們這里填寫了三個屬性，分別是value,key,index。其中value是對象的值，key是對象的鍵，index是索引。

通過結(jié)果也顯而易見。

2. v-for的key

在使用v-for來渲染列表的時候，我們需要為每一個節(jié)點(diǎn)添加一個唯一的key屬性。這樣做的好處是可以提高渲染的效率。

眾所周知，在vue中有一個虛擬dom，通過虛擬dom可以極大的提高渲染的效率。當(dāng)我們使用v-for來渲染一個列表的時候，vue會根據(jù)key來判斷節(jié)點(diǎn)是否需要更新。如果key不變，那么vue會復(fù)用節(jié)點(diǎn)，如果key變了，那么vue會重新渲染節(jié)點(diǎn)。

也就是說，如果我們需要給對象或者數(shù)組添加/刪除元素，vue會先比較哪些元素變了，哪些元素沒變。變了的元素，dom才會更新，沒有發(fā)生改變的，dom就直接拿過來使用。這樣就極大的提高了渲染的效率。

補(bǔ)充：v-for中key屬性的意義

舉個例子如
<li v-for="(item,index) in anime" :key="item">{{index+1}}-{{item}}</li>
或者
<td v-for="(value,name,index) of obj" :key="index">
武器 {{value}} <br>人物 {{name}}  <br>排名 {{index}}
</td>

v-for遍歷對象，這里的key是個形參，它指的是對象里的屬性名，可以是id，name或者什么

而其他時候，在我們使用v-for時，建議給對應(yīng)的元素或組件添加一個key屬性

主要是為了更加高效的更新虛擬DOM，便于diff算法

假設(shè)要在一個節(jié)點(diǎn)列表abcde的bc之間插入一個新節(jié)點(diǎn)f，在添加key屬性前，算法默認(rèn)是將c更新成f，d更新成c，e更新成d，最后再插入e，這樣是幾步？大家可以數(shù)一下

而在添加key屬性后，key為每一個節(jié)點(diǎn)做了一個標(biāo)識，算法可以準(zhǔn)確高效的在要求的位置插入新節(jié)點(diǎn)，也就不會再那樣一次更新消耗資源了

官方的解釋：key屬性主要用在Vue的虛擬DOM算法，在新舊nodes對比時辨識VNodes；

如果不使用key，Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法；

而使用key時，它會基于key的變化重新排列元素順序，并且會移除/銷毀key不存在的元素；

詳細(xì)來說，我們知道，vue實(shí)現(xiàn)了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作數(shù)據(jù)便可以重新渲染頁面。而隱藏在背后的原理便是其高效的Diff算法。

總結(jié)

到此這篇關(guān)于Vue中的v-for列表循環(huán)的文章就介紹到這了,更多相關(guān)Vue v-for列表循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論