這在碰到諸如以下情況時(shí)特別好用：

• 渲染數(shù)組或列表
• 遍歷對(duì)象屬性
  

在Vue中v-for循環(huán)最基本的用法是這樣的：

<ul>
  <li v-for='product in products'>
    {{ product.name }}
  </li>
</ul>

但是，在本文中，我們將介紹一些超棒的方法，可以使你的v-for代碼更加精確、可預(yù)測(cè)和高效。

讓我們開(kāi)始吧。

1. 始終在v-for循環(huán)中使用key

首先，我們討論的是大多數(shù)Vue開(kāi)發(fā)人員已經(jīng)知道的常見(jiàn)最佳實(shí)踐——在v-for循環(huán)中使用:key。通過(guò)設(shè)置唯一的鍵屬性，可以確保組件按期望的方式工作。

如果我們不使用:key，Vue將使DOM盡可能高效。這可能會(huì)導(dǎo)致v-for元素出現(xiàn)亂序或其他不可預(yù)測(cè)的行為。

如果我們對(duì)每個(gè)元素都有唯一的鍵引用，那么就可以更好地預(yù)測(cè)如何操縱DOM。

<ul>
  <li 
    v-for='product in products'
    :key='product._id'  
  >
    {{ product.name }}
  </li>
</ul>

2. 在一定范圍內(nèi)使用v-for循環(huán)

雖然大多數(shù)時(shí)候v-for用于循環(huán)數(shù)組或?qū)ο?，但也有我們只想迭代特定次?shù)的情況。

例如，假設(shè)我們正在為在線商店創(chuàng)建分頁(yè)系統(tǒng)，并且我們只想每頁(yè)顯示10個(gè)產(chǎn)品。使用變量來(lái)跟蹤當(dāng)前頁(yè)碼，就可以像這樣處理分頁(yè)。

<ul>
  <li v-for='index in 10' :key='index'>
    {{ products[page * 10 + index] }}
  </li>
</ul>

3. 避免在循環(huán)中使用v-if

一個(gè)超常見(jiàn)的錯(cuò)誤是使用v-if來(lái)過(guò)濾v-for循環(huán)的數(shù)據(jù)。

雖然看上去直觀了，但這會(huì)導(dǎo)致一個(gè)巨大的性能問(wèn)題——VueJS將優(yōu)先v-for于v-if指令。

這意味著組件將遍歷每個(gè)元素，然后再檢查v-if條件以查看是否應(yīng)該呈現(xiàn)。

如果你將v-if與v-for一起使用，無(wú)論條件是什么，都將遍歷數(shù)組的每一項(xiàng)。

// 不好的做法!
<ul>
  <li 
    v-for='product in products' 
    :key='product._id' 
    v-if='product.onSale'
  >
    {{ product.name }}
  </li>
</ul>

那么問(wèn)題是什么？

假設(shè)products數(shù)組有數(shù)千個(gè)項(xiàng)，但想要渲染的只有3個(gè)在售產(chǎn)品。

每次重新渲染時(shí)，即使出售的3種產(chǎn)品根本沒(méi)有改變，Vue也必須遍歷這數(shù)千個(gè)項(xiàng)。

必須盡量避免結(jié)合使用v-if與v-for的情況。

接下來(lái)介紹兩個(gè)替代方法。

4. 使用computed屬性或方法

為了避免上述問(wèn)題，我們應(yīng)該在模板中進(jìn)行迭代之前過(guò)濾數(shù)據(jù)。有兩種非常相似的方法可以做到：

• 使用computed屬性
• 使用過(guò)濾方法
  

隨你選擇，下面讓我們快速介紹這兩個(gè)方法。

首先，我們只需要設(shè)置一個(gè)computed屬性。為了獲得與之前的v-if相同的功能，代碼看起來(lái)像這樣。

<template>
  <ul>
    <li v-for="products in productsOnSale" :key="product._id">
      {{ product.name }}
    </li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        products: []
      }
    },
    computed: {
      productsOnSale: function () {
        return this.products.filter(product => product.onSale)
      }
    }
  }
</script>

這樣的好處是：

• 數(shù)據(jù)屬性只會(huì)在依賴項(xiàng)發(fā)生變化時(shí)重新評(píng)估
• 模板只遍歷在售的產(chǎn)品，而不是每一個(gè)產(chǎn)品
  

使用過(guò)濾方法的代碼幾乎相同，但使用方法會(huì)改變?cè)L問(wèn)模板內(nèi)值的方式。但是，如果我們希望能夠?qū)⒆兞總鬟f給過(guò)濾過(guò)程，那么就應(yīng)該選擇方法這條路。

<template>
  <ul>
    <li v-for="products in productsOnSale(50))" :key="product._id">
      {{ product.name }}
    </li>
  </ul>
</template>

<script>
  export default {
   data () {
    return {
     products: []
    }
   },
   methods: {
    productsOnSale (maxPrice) {
     return this.products.filter(product => product.onSale && product.price < maxPrice)
    }
   }
  }
</script>

5. 或者在循環(huán)外包一層元素

在決定是否完全渲染列表時(shí)，你可能還是想要將v-for與v-if結(jié)合起來(lái)。

例如，如果我們只想在用戶登錄時(shí)呈現(xiàn)產(chǎn)品列表怎么辦。

錯(cuò)誤代碼：

<ul>
  <li 
    v-for='product in products' 
    :key='product._id' 
    v-if='isLoggedIn' <!-- HERE -->
  >
    {{ product.name }}
  </li>
</ul>

這有什么問(wèn)題？

和之前一樣。Vue模板會(huì)優(yōu)先考慮v-for——所以會(huì)遍歷每個(gè)元素并檢查v-if。

即使最后什么都不渲染，也會(huì)循環(huán)數(shù)千個(gè)元素。

對(duì)于此示例，有一個(gè)簡(jiǎn)單的解決方案是移動(dòng)v-if語(yǔ)句。

更好的代碼！

<ul v-if='isLoggedIn'> <!-- Much better -->
  <li 
    v-for='product in products' 
    :key='product._id' 
  >
    {{ product.name }}
  </li>
</ul>

這要好得多，因?yàn)槿绻?code>isLoggedIn為false——那就根本不需要迭代。

6. 訪問(wèn)循環(huán)中的索引

除了遍歷數(shù)組并訪問(wèn)每個(gè)元素之外，我們還可以跟蹤每個(gè)項(xiàng)目的索引。

為此，我們需要在項(xiàng)目之后添加一個(gè)索引值。這樣做超級(jí)簡(jiǎn)單，但對(duì)于分頁(yè)、顯示列表索引、顯示排名等都很有用。

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    Product #{{ index }}: {{ product.name }}
  </li>
</ul>

7. 迭代對(duì)象

到目前為止，我們只研究了使用v-for來(lái)遍歷數(shù)組。但是我們也可以很輕松地學(xué)會(huì)迭代對(duì)象的鍵值對(duì)。

與訪問(wèn)元素的索引類似，我們需要向循環(huán)中添加另一個(gè)值。如果我們使用單個(gè)參數(shù)循環(huán)對(duì)象，我們將循環(huán)所有項(xiàng)。

如果我們添加另一個(gè)參數(shù)，則將獲得項(xiàng)和鍵。如果我們添加第三個(gè)參數(shù)，則還可以訪問(wèn)v-for循環(huán)的索引。

假設(shè)我們想遍歷產(chǎn)品中的每個(gè)屬性。那么代碼如下：

<ul>
  <li v-for='(products, index) in products' :key='product._id' >
    <span v-for='(item, key, index) in product' :key='key'>
      {{ item }}
    </span>
  </li>
</ul>

結(jié)論：
希望這篇文章能幫助你學(xué)到一些關(guān)于使用Vue v-for指令的最佳實(shí)踐。

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

最新評(píng)論