編寫 Vue v-for 循環更優雅的 7 種方式

在Vue中,基本上每個項目都會用到v-for循環。它們允許你在模板代碼中編寫for循環。 這在碰到諸如以下情況時特別好用: 渲染數組或列表 遍歷對象屬性 在Vue中v-for循環最基本的用法是這樣的: 但是,在本文中,我們將介紹一些超棒的方法,可以使你的v-for代碼更加精確、可預測和高效。 讓我們開始吧。
1.始終在v-for循環中使用key
首先,我們討論的是大多數Vue開發人員已經知道的常見最佳實踐——在v-for循環中使用:key。通過設置唯一的鍵屬性,可以確保組件按期望的方式工作。 如果我們不使用:key,Vue將使DOM盡可能高效。這可能會導致v-for元素出現亂序或其他不可預測的行為。 如果我們對每個元素都有唯一的鍵引用,那么就可以更好地預測如何操縱DOM。 2. 在一定范圍內使用v-for循環
雖然大多數時候v-for用于循環數組或對象,但也有我們只想迭代特定次數的情況。 例如,假設我們正在為在線商店創建分頁系統,并且我們只想每頁顯示10個產品。使用變量來跟蹤當前頁碼,就可以像這樣處理分頁。 3. 避免在循環中使用v-if
一個超常見的錯誤是使用v-if來過濾v-for循環的數據。 雖然看上去直觀了,但這會導致一個巨大的性能問題——VueJS將優先v-for于v-if指令。 這意味著組件將遍歷每個元素,然后再檢查v-if條件以查看是否應該呈現。 如果你將v-if與v-for一起使用,無論條件是什么,都將遍歷數組的每一項。 那么問題是什么?
假設products數組有數千個項,但想要渲染的只有3個在售產品。
每次重新渲染時,即使出售的3種產品根本沒有改變,Vue也必須遍歷這數千個項。
必須盡量避免結合使用v-if與v-for的情況。
接下來介紹兩個替代方法。
4. 使用computed屬性或方法
為了避免上述問題,我們應該在模板中進行迭代之前過濾數據。有兩種非常相似的方法可以做到:
使用computed屬性
使用過濾方法
隨你選擇,下面讓我們快速介紹這兩個方法。
首先,我們只需要設置一個computed屬性。為了獲得與之前的v-if相同的功能,代碼看起來像這樣。
這樣的好處是:
數據屬性只會在依賴項發生變化時重新評估
模板只遍歷在售的產品,而不是每一個產品
使用過濾方法的代碼幾乎相同,但使用方法會改變訪問模板內值的方式。但是,如果我們希望能夠將變量傳遞給過濾過程,那么就應該選擇方法這條路。
5. 或者在循環外包一層元素
在決定是否完全渲染列表時,你可能還是想要將v-for與v-if結合起來。
例如,如果我們只想在用戶登錄時呈現產品列表怎么辦。
錯誤代碼:
這有什么問題?
和之前一樣。Vue模板會優先考慮v-for——所以會遍歷每個元素并檢查v-if。
即使最后什么都不渲染,也會循環數千個元素。
對于此示例,有一個簡單的解決方案是移動v-if語句。
更好的代碼!
這要好得多,因為如果isLoggedIn為false——那就根本不需要迭代。 6. 訪問循環中的索引
除了遍歷數組并訪問每個元素之外,我們還可以跟蹤每個項目的索引。
為此,我們需要在項目之后添加一個索引值。這樣做超級簡單,但對于分頁、顯示列表索引、顯示排名等都很有用。
7. 迭代對象
到目前為止,我們只研究了使用v-for來遍歷數組。但是我們也可以很輕松地學會迭代對象的鍵值對。
與訪問元素的索引類似,我們需要向循環中添加另一個值。如果我們使用單個參數循環對象,我們將循環所有項。
如果我們添加另一個參數,則將獲得項和鍵。如果我們添加第三個參數,則還可以訪問v-for循環的索引。
假設我們想遍歷產品中的每個屬性。那么代碼如下:
99久久国产自偷自偷免费一区