在Vue中，使用keyup事件是處理用戶輸入非常重要的一種方式。利用Vue的v-model指令可以將用戶的輸入綁定到Vue實例的data屬性上，然后用過濾器將數據呈現在頁面上。

<template>
<div>
<input v-model="inputValue" v-on:keyup="search" />
<ul>
<li v-for="item in filteredList">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
list: ['apple', 'banana', 'cherry', 'durian'],
}
},
methods: {
search() {
// 過濾列表
}
},
computed: {
filteredList() {
// 根據inputValue和list過濾出符合條件的列表，返回新的數組
}
}
}
</script>

以上代碼中，我們綁定了一個input框，當用戶輸入內容時，會觸發search方法去過濾數組中符合條件的元素，并通過computed屬性將過濾后的結果渲染到頁面上。

下面我們來看一下如何實現過濾方法。假設我們要實現一個功能，在列表中輸入字符后，過濾出符合條件的項。

search() {
let result = []
for(let i = 0; i< this.list.length; i++) {
if(this.list[i].includes(this.inputValue)) {
result.push(this.list[i])
}
}
this.filteredList = result
}

這個方法會遍歷列表中所有元素，若該元素中包含inputValue中的內容，則將該元素添加到結果數組中。最后通過Vue實例的data屬性將過濾后的結果保存下來。

但是，上面的代碼存在性能問題。每次輸入都要重新判斷數組中的每一個元素，對性能會造成很大的影響。

那么該怎么解決這個問題呢？Vue提供了watch屬性，用于監聽data屬性的變化。我們可以將inputValue綁定到watch屬性中，實現數據的實時更新和計算結果的緩存，避免重復計算的問題。

<script>
export default {
data() {
return {
inputValue: '',
list: ['apple', 'banana', 'cherry', 'durian'],
filteredList: []
}
},
methods: {
search() {
// 空實現，由watch屬性實現過濾功能
}
},
watch: {
inputValue(newValue, oldValue) {
let result = []
for(let i = 0; i < this.list.length; i++) {
if(this.list[i].includes(newValue)) {
result.push(this.list[i])
}
}
this.filteredList = result
}
}
}
</script>

這里，我們將inputValue綁定到watch屬性上，每次輸入時，watch都會監聽到該值的變化，并執行相應的方法。過濾的結果會保存在filteredList中，并渲染到頁面上。

總結一下，Vue中使用keyup事件和過濾器，可以監聽用戶輸入并處理數據，并通過computed屬性把處理后的結果渲染到頁面上。在處理大量數據時，使用watch屬性可以緩存計算結果，提高性能。