Vue 中 filter 過濾的語法詳解與注意事項

在 Vue.js 中，"過濾"通常指兩種不同概念：模板過濾器（Vue 2 特性）和數組過濾（數據過濾）。由于 Vue 3 已移除模板過濾器，我將重點介紹更實用且通用的數組過濾語法和注意事項。

一、數組過濾核心語法（推薦方式）

1. 使用計算屬性（最佳實踐）

computed: {filteredItems() {return this.items.filter(item => {// 過濾條件return item.name.includes(this.searchTerm) && item.price <= this.maxPrice;});}
}

2. 使用方法過濾（不推薦用于渲染）

methods: {filterItems(items) {return items.filter(item => item.isActive);}
}

3. 直接在模板中使用（性能最差）

<!-- 避免使用：每次渲染都會重新計算 -->
<div v-for="item in items.filter(i => i.stock > 0)">

二、關鍵注意事項

1. 性能優化（最重要）

• 優先使用計算屬性：自動緩存結果，避免重復計算
• 避免在模板中直接過濾：每次渲染都會重新執行
• 大型數據集使用分頁/虛擬滾動：

  paginatedItems() {const start = (this.page - 1) * this.pageSize;return this.filteredItems.slice(start, start + this.pageSize);
  }
  

2. 空值處理

filteredItems() {// 確保 items 是數組const source = Array.isArray(this.items) ? this.items : [];return source.filter(item => {// 確保屬性存在const name = item.name || '';return name.includes(this.searchTerm);});
}

3. 復雜過濾邏輯優化

computed: {filteredItems() {const { searchTerm, minPrice, category } = this.filters;return this.items.filter(item => {// 條件1：搜索詞匹配const nameMatch = searchTerm ? item.name.toLowerCase().includes(searchTerm.toLowerCase()): true;// 條件2：價格范圍const priceMatch = minPrice ? item.price >= minPrice : true;// 條件3：類別匹配const categoryMatch = category ? item.category === category : true;return nameMatch && priceMatch && categoryMatch;});}
}

4. 防抖處理（搜索場景）

data() {return {searchInput: '',searchTerm: '' // 實際用于過濾的值};
},
watch: {