Vue 中 filter 與 computed 的區別與用法解析

watch與computed、filter：

watch:監控已有屬性，一旦屬性發生了改變就去自動調用對應的方法

computed:監控已有的屬性,一旦屬性的依賴發生了改變，就去自動調用對應的方法

filter:js中為我們提供的一個方法，用來幫助我們對數據進行篩選

watch與computed的區別:

1.watch監控現有的屬性,computed通過現有的屬性計算出一個新的屬性

2.watch不會緩存數據，每次打開頁面都會重新加載一次，

但是computed如果之前進行過計算他會將計算的結果緩存，如果再次請求會從緩存中
得到數據（所以computed的性能比watch更好一些）

最近遇到一個很不錯的候選人，經驗豐富，有技術亮點，但在一些細枝末節問題上沒有回答的很好，最終還是被刷了。面試過程中有一個問題我印象特別深刻： Vue 中filter與computed屬性的區別 ，可惜候選人在現場沒有回答上，這里總結一下：

filter 與 computed 的區別

1. 觸發時機不同

computed 屬性背后的處理邏輯比較復雜，依賴 Vue 的數據更新通知機制，在屬性所依賴的其他數據項發生變化時才會重新觸發計算。優點是計算頻率相對較低；缺點是依賴于組件，難以抽取成獨立邏輯，也就是復用性低。

filter 則顯的簡單很多，只在顯式調用時觸發，一般應用在模板渲染上。優點是容易在組件外抽象；缺點是每次模板渲染時都需要重新執行計算。可以通過示例 感受調用時機的區別：

2. 應用范圍不同

computed 很廣泛，可以應用在其他computed、methods、生命周期函數、模板；filter 一般只應用于模板渲染上，如果要在其他位置復用，需要使用 this._f 函數：

Vue.component('HelloWorld', {
 filters: {
 hello() {
 return 'hello';
 }
 },
 methods: {
 ping() {
 return `${this._f('hello')()} world`;
 }
 }
})

另外，在使用上filter支持鏈式調用，這為其增加了組合拼接的能力：

<span> {{ name | normalize | capitalize }} </span>

3. 定義方式

最后需要指出，computed 屬性只能在組件內部或通過mixins對象定義；而 filter 有兩種定義方式，一是在組件內部通過 filters 屬性定義；一是在組件外部通過 Vue.filter 函數定義：

Vue.component('HelloWorld', {
 filters: {
 hello() {
 return 'hello';
 }
 }
});
Vue.filter('hello', ()=> 'hello');

應用規則

綜上，filter 無法緩存，調用頻率高，因此特別適用于格式化輸出場景，比如日期格式化。filter 具有組合調用能力，因此可以在項目架構層面定義一堆基礎的、簡單的filter，按需在組件內組合適用。

computed 屬性具有緩存能力，在組件內普適性更強，因此適用于復雜的數據轉換、統計等場景。

總結

以上所述是小編給大家介紹的Vue 中 filter 與 computed 的區別與用法解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！