6個在Vue.js編寫更好v-for循環(huán)的技巧

原文 | https://learnvue.co/2020/02

翻譯 | 杜尼卜

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

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

讓我們開始吧。

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

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

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

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

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

盡管大多數(shù)情況下，v-for 用于遍歷數(shù)組或?qū)ο?，但在某些情況下，我們肯定只希望循環(huán)執(zhí)行一定次數(shù)。

例如，假設(shè)我們正在為在線商店創(chuàng)建一個分頁系統(tǒng)，而我們只希望每頁顯示10個產(chǎn)品。使用一個變量來跟蹤當前的頁碼，我們可以像這樣處理分頁。

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

3、不要在循環(huán)中使用v-if

一個超級常見的錯誤是使用 v-if 來過濾 v-for 循環(huán)的數(shù)據(jù)。盡管這看起來很直觀，但它會導(dǎo)致一個巨大的性能問題——Vuejs優(yōu)先考慮 v-for 而不是 v-if 指令。

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

不要這樣：

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

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

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

• 使用計算屬性

• 使用過濾方法

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

首先，我們只需要設(shè)置一個計算屬性，為了獲得與之前的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>

下面的代碼幾乎相同，但是使用方法改變了我們訪問模板中的值的方式，如果我們希望能夠?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)中訪問項目的索引

除了遍歷數(shù)組和訪問每個元素之外，我們還可以跟蹤每個項的索引。

為此，我們必須在項目后添加一個索引值，它非常簡單，可用于分頁，顯示列表索引，顯示排名等。

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

6、遍歷一個對象

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

與訪問元素的索引類似，我們必須向循環(huán)中添加另一個值。如果我們用一個參數(shù)遍歷一個對象，我們將遍歷所有的項。

如果我們添加另一個參數(shù)，我們將獲得items 和 key，如果添加第三個，我們還可以訪問 v-for 循環(huán)的索引。

假設(shè)我們要遍歷產(chǎn)品中的每個媒體資源。

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

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

你還有什么其他建議嗎？

專注分享當下最實用的前端技術(shù)。關(guān)注前端達人，與達人一起學(xué)習(xí)進步！

長按關(guān)注"前端達人"