但(dàn)是，在本文中，我們将介紹一些(xiē)超棒的方法，可(kě)以使你(nǐ)的v-for代碼更加精确、可(kě)預測和(hé)高(gāo)效。
讓我們開(kāi)始吧(ba)。1.始終在v-for循環中使用key
首先，我們討(tǎo)論的是大(dà)多(duō)數(shù)Vue開(kāi)發人(rén)員已經知道(dào)的常見最佳實踐——在v-for循環中使用:key。通(tōng)過設置唯一的鍵屬性，可(kě)以确保組件按期望的方式工作(zuò)。 如果我們不使用:key，Vue将使DOM盡可(kě)能高(gāo)效。這可(kě)能會(huì)導緻v-for元素出現亂序或其他不可(kě)預測的行(xíng)為(wèi)。 如果我們對每個(gè)元素都有(yǒu)唯一的鍵引用，那(nà)麽就可(kě)以更好地預測如何操縱DOM。
2. 在一定範圍內(nèi)使用v-for循環雖然大(dà)多(duō)數(shù)時(shí)候v-for用于循環數(shù)組或對象，但(dàn)也有(yǒu)我們隻想叠代特定次數(shù)的情況。 例如，假設我們正在為(wèi)在線商店(diàn)創建分頁系統，并且我們隻想每頁顯示10個(gè)産品。使用變量來(lái)跟蹤當前頁碼，就可(kě)以像這樣處理(lǐ)分頁。
3. 避免在循環中使用v-if一個(gè)超常見的錯誤是使用v-if來(lái)過濾v-for循環的數(shù)據。 雖然看上(shàng)去直觀了，但(dàn)這會(huì)導緻一個(gè)巨大(dà)的性能問題——VueJS将優先v-for于v-if指令。 這意味着組件将遍曆每個(gè)元素，然後再檢查v-if條件以查看是否應該呈現。 如果你(nǐ)将v-if與v-for一起使用，無論條件是什麽，都将遍曆數(shù)組的每一項。
那(nà)麽問題是什麽？假設products數(shù)組有(yǒu)數(shù)千個(gè)項，但(dàn)想要渲染的隻有(yǒu)3個(gè)在售産品。
每次重新渲染時(shí)，即使出售的3種産品根本沒有(yǒu)改變，Vue也必須遍曆這數(shù)千個(gè)項。
必須盡量避免結合使用v-if與v-for的情況。
接下來(lái)介紹兩個(gè)替代方法。
4. 使用computed屬性或方法
為(wèi)了避免上(shàng)述問題，我們應該在模闆中進行(xíng)叠代之前過濾數(shù)據。有(yǒu)兩種非常相似的方法可(kě)以做(zuò)到：
使用computed屬性
使用過濾方法
随你(nǐ)選擇，下面讓我們快速介紹這兩個(gè)方法。
首先，我們隻需要設置一個(gè)computed屬性。為(wèi)了獲得(de)與之前的v-if相同的功能，代碼看起來(lái)像這樣。
這樣的好處是：數(shù)據屬性隻會(huì)在依賴項發生(shēng)變化時(shí)重新評估
模闆隻遍曆在售的産品，而不是每一個(gè)産品
使用過濾方法的代碼幾乎相同，但(dàn)使用方法會(huì)改變訪問模闆內(nèi)值的方式。但(dàn)是，如果我們希望能夠将變量傳遞給過濾過程，那(nà)麽就應該選擇方法這條路。
5. 或者在循環外包一層元素在決定是否完全渲染列表時(shí)，你(nǐ)可(kě)能還(hái)是想要将v-for與v-if結合起來(lái)。
例如，如果我們隻想在用戶登錄時(shí)呈現産品列表怎麽辦。
錯誤代碼：
這有(yǒu)什麽問題？和(hé)之前一樣。Vue模闆會(huì)優先考慮v-for——所以會(huì)遍曆每個(gè)元素并檢查v-if。
即使最後什麽都不渲染，也會(huì)循環數(shù)千個(gè)元素。
對于此示例，有(yǒu)一個(gè)簡單的解決方案是移動v-if語句。
更好的代碼！
這要好得(de)多(duō)，因為(wèi)如果isLoggedIn為(wèi)false——那(nà)就根本不需要叠代。
6. 訪問循環中的索引除了遍曆數(shù)組并訪問每個(gè)元素之外，我們還(hái)可(kě)以跟蹤每個(gè)項目的索引。
為(wèi)此，我們需要在項目之後添加一個(gè)索引值。這樣做(zuò)超級簡單，但(dàn)對于分頁、顯示列表索引、顯示排名等都很(hěn)有(yǒu)用。
7. 叠代對象到目前為(wèi)止，我們隻研究了使用v-for來(lái)遍曆數(shù)組。但(dàn)是我們也可(kě)以很(hěn)輕松地學會(huì)叠代對象的鍵值對。
與訪問元素的索引類似，我們需要向循環中添加另一個(gè)值。如果我們使用單個(gè)參數(shù)循環對象，我們将循環所有(yǒu)項。
如果我們添加另一個(gè)參數(shù)，則将獲得(de)項和(hé)鍵。如果我們添加第三個(gè)參數(shù)，則還(hái)可(kě)以訪問v-for循環的索引。
假設我們想遍曆産品中的每個(gè)屬性。那(nà)麽代碼如下：
