在開發過程中，我們經常需要從數據集中篩選出符合特定條件的數據。為了方便用戶進行篩選操作，通常我們會設計一些篩選條件，在數據集中按照這些條件進行過濾。在Vue中，我們可以使用計算屬性和watch來輕松實現這一功能。

data: {
items: [
{name: 'apple', category: 'fruit', price: 1.2},
{name: 'banana', category: 'fruit', price: 0.8},
{name: 'carrot', category: 'vegetable', price: 0.6},
{name: 'celery', category: 'vegetable', price: 0.3},
],
filters: {
category: 'all',
maxPrice: null,
},
},
computed: {
filteredItems() {
return this.items.filter(item =>{
if (this.filters.category !== 'all' && item.category !== this.filters.category) {
return false
}
if (this.filters.maxPrice !== null && item.price >this.filters.maxPrice) {
return false
}
return true
})
},
},
watch: {
'filters.category'(val) {
console.log(`category changed to ${val}`)
},
'filters.maxPrice'(val) {
console.log(`maxPrice changed to ${val}`)
},
}

在上面的代碼中，我們定義了一個items數組，其中包含若干對象，每個對象代表一個商品，有名字、類別和價格三個屬性。我們還定義了一個filters對象，包含了兩個屬性：category和maxPrice。category表示當前選擇的商品類別，maxPrice表示當前選擇的價格上限。最后，我們定義了一個計算屬性filteredItems，用于根據當前的篩選條件過濾items數組。

計算屬性filteredItems的實現非常簡單，我們只需要使用數組的filter方法，按照目標條件進行篩選即可。如果category屬性被設定為'all'，則不進行篩選；如果maxPrice屬性為null，則不限制上限。否則，我們只展示類別符合條件、價格不超過上限的商品。

為了監聽filters對象的變化，我們也使用了watch方法。這里需要注意兩點。首先，我們監聽的是filters對象的屬性變化，而不是整個對象的變化。這是因為如果我們監視的是整個對象，那么當我們修改一個屬性時，整個對象都會被認為是發生了變化，導致watch方法被觸發。其次，我們在watch方法中沒有直接修改filteredItems屬性，而是使用console.log方法記錄信息。這是因為watch方法主要用于監聽數據變化，而不是直接修改數據，修改數據應該在Vue的生命周期函數中進行。

除了使用計算屬性和watch，我們還可以使用Vue組件中的computed、watch和props等方法輕松實現篩選條件功能。Vue的設計非常靈活，開發者可以根據具體情況選擇合適的方法來實現自己的功能。