在Vue.js中編寫更好的v-for循環的6種技巧

在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開發人員的12個技巧和竅門

---

原文：learnvue.co/2020/02/6-t…
翻譯：杜尼卜

若是對你有所啓發和幫助，能夠點個關注、收藏，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。

如今關注《前端外文精選》微信公衆號，還送某網精品視頻課程網盤資料啊，準能爲你節省很多錢！