在VueJS中，v-for迴圈是每個專案都會使用的東西，它允許您在模板程式碼中編寫for迴圈。

在最基本的用法中，它們的用法如下。

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

但是，在本文中，我將介紹六種方法來使你的 v-for 程式碼更加精確，可預測和強大。

讓我們開始吧。

1.始終在v-for迴圈中使用key

首先，我們將討論大多數Vue開發人員已經知道的常見最佳做法——在 v-for 迴圈中使用 :key。透過設定一個惟一的鍵屬性，它可以確保元件以您期望的方式工作。

果我們不使用key，Vue將嘗試使DOM儘可能高效，這可能意味著 v-for 元素可能會出現亂序或其他不可預測的行為。如果我們對每個元素都有唯一的鍵引用，那麼我們就可以更好地準確地預測DOM將如何操作。

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

2.在一個範圍內迴圈

儘管大多數情況下，v-for 用於遍歷陣列或物件，但在某些情況下，我們肯定只希望迴圈執行一定次數。

例如，假設我們正在為線上商店建立一個分頁系統，而我們只希望每頁顯示10個產品。使用一個變數來跟蹤當前的頁碼，我們可以像這樣處理分頁。

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

3.不要在迴圈中使用v-if

一個超級常見的錯誤是使用 v-if 來過濾 v-for 迴圈的資料。儘管這看起來很直觀，但它會導致一個巨大的效能問題——VueJS優先考慮 v-for 而不是 v-if 指令。

這意味著您的元件將迴圈遍歷每個元素，然後檢查 v-if 條件以確定是否應渲染。因此，實際上，無論條件是什麼，您都將遍歷陣列的每個專案。

不要這樣：

// BAD CODE!
<ul>
  <li 
    v-for='product in products' 
    :key='product._id' 
    v-if='product.price < 50'
  >
    {{ product.name }}
  </li>
</ul>

4.使用計算屬性或方法代替

為避免上述問題，我們應該在遍歷模板中的資料之前對其進行過濾。有兩種非常相似的方法：

使用計算屬性
使用過濾方法

讓我們快速地介紹一下這兩種方法。

首先，我們只需要設定一個計算屬性，為了獲得與之前的v-if相同的功能，程式碼應如下所示。

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

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

下面的程式碼幾乎相同，但是使用方法改變了我們訪問模板中的值的方式，如果我們希望能夠將變數傳遞給篩選器，那麼方法是最好的選擇。

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

// ...

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

5.在迴圈中訪問專案的索引

除了遍歷陣列和訪問每個元素之外，我們還可以跟蹤每個項的索引。

為此，我們必須在專案後新增一個索引值，它非常簡單，可用於分頁，顯示列表索引，顯示排名等。

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

6.遍歷一個物件

到目前為止，我們只真正看過使用 v-for 遍歷陣列，但是我們可以輕鬆地遍歷物件的鍵值對。

與訪問元素的索引類似，我們必須向迴圈中新增另一個值。如果我們用一個引數遍歷一個物件，我們將遍歷所有的項。

如果我們新增另一個引數，我們將獲得items 和 key，如果新增第三個，我們還可以訪問 v-for 迴圈的索引。

假設我們要遍歷產品中的每個媒體資源。

<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>

總結

希望這篇簡短的文章能教您一些有關使用Vue的 v-for 指令的最佳做法。

你還有什麼其他建議嗎？

原文：

翻譯：杜尼卜

在Vue.js編寫更好的v-for迴圈的6種技巧