在VueJS中，v-for循環(huán)是每個(gè)項(xiàng)目都會(huì)使用的東西，它允許您在模板代碼中編寫(xiě)for循環(huán)。

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

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

但是，在本文中，我將介紹六種方法來(lái)使你的 v-for 代碼更加精確，可預(yù)測(cè)和強(qiáng)大。

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

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

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

果我們不使用key，Vue將嘗試使DOM盡可能高效，這可能意味著 v-for 元素可能會(huì)出現(xiàn)亂序或其他不可預(yù)測(cè)的行為。如果我們對(duì)每個(gè)元素都有唯一的鍵引用，那么我們就可以更好地準(zhǔn)確地預(yù)測(cè)DOM將如何操作。

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

2.在一個(gè)范圍內(nèi)循環(huán)

盡管大多數(shù)情況下，v-for 用于遍歷數(shù)組或?qū)ο?，但在某些情況下，我們肯定只希望循環(huán)執(zhí)行一定次數(shù)。
例如，假設(shè)我們正在為在線(xiàn)商店創(chuàng)建一個(gè)分頁(yè)系統(tǒng)，而我們只希望每頁(yè)顯示10個(gè)產(chǎn)品。使用一個(gè)變量來(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è)超級(jí)常見(jiàn)的錯(cuò)誤是使用 v-if 來(lái)過(guò)濾 v-for 循環(huán)的數(shù)據(jù)。盡管這看起來(lái)很直觀，但它會(huì)導(dǎo)致一個(gè)巨大的性能問(wèn)題——VueJS優(yōu)先考慮 v-for 而不是 v-if 指令。

這意味著您的組件將循環(huán)遍歷每個(gè)元素，然后檢查 v-if 條件以確定是否應(yīng)渲染。因此，實(shí)際上，無(wú)論條件是什么，您都將遍歷數(shù)組的每個(gè)項(xiàng)目。

不要這樣：

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

4.使用計(jì)算屬性或方法代替

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

• 使用計(jì)算屬性
• 使用過(guò)濾方法

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

首先，我們只需要設(shè)置一個(gè)計(jì)算屬性，為了獲得與之前的v-if相同的功能，代碼應(yīng)如下所示。

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

下面的代碼幾乎相同，但是使用方法改變了我們?cè)L問(wèn)模板中的值的方式，如果我們希望能夠?qū)⒆兞總鬟f給篩選器，那么方法是最好的選擇。

<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.在循環(huán)中訪(fǎng)問(wèn)項(xiàng)目的索引

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

為此，我們必須在項(xiàng)目后添加一個(gè)索引值，它非常簡(jiǎn)單，可用于分頁(yè)，顯示列表索引，顯示排名等。

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

6.遍歷一個(gè)對(duì)象

到目前為止，我們只真正看過(guò)使用 v-for 遍歷數(shù)組，但是我們可以輕松地遍歷對(duì)象的鍵值對(duì)。

與訪(fǎng)問(wèn)元素的索引類(lèi)似，我們必須向循環(huán)中添加另一個(gè)值。如果我們用一個(gè)參數(shù)遍歷一個(gè)對(duì)象，我們將遍歷所有的項(xiàng)。
如果我們添加另一個(gè)參數(shù)，我們將獲得items 和 key，如果添加第三個(gè)，我們還可以訪(fǎng)問(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é)

希望這篇簡(jiǎn)短的文章能教您一些有關(guān)使用Vue的 v-for 指令的最佳做法。
你還有什么其他建議嗎？

原文：https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/?utm_source=rss&utm_medium=rss&utm_campaign=6-techniques-to-write-better-vuejs-v-for-loops
翻譯：杜尼卜

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

最新評(píng)論