Vue 中 filter 與 computed 的區(qū)別與用法解析

watch與computed、filter：

watch:監(jiān)控已有屬性，一旦屬性發(fā)生了改變就去自動調(diào)用對應(yīng)的方法

computed:監(jiān)控已有的屬性,一旦屬性的依賴發(fā)生了改變，就去自動調(diào)用對應(yīng)的方法

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

watch與computed的區(qū)別:

1.watch監(jiān)控現(xiàn)有的屬性,computed通過現(xiàn)有的屬性計算出一個新的屬性

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

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

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

filter 與 computed 的區(qū)別

1. 觸發(fā)時機不同

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

filter 則顯的簡單很多，只在顯式調(diào)用時觸發(fā)，一般應(yīng)用在模板渲染上。優(yōu)點是容易在組件外抽象；缺點是每次模板渲染時都需要重新執(zhí)行計算?？梢酝ㄟ^示例 感受調(diào)用時機的區(qū)別：

2. 應(yīng)用范圍不同

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

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

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

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

3. 定義方式

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

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

應(yīng)用規(guī)則

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

computed 屬性具有緩存能力，在組件內(nèi)普適性更強，因此適用于復(fù)雜的數(shù)據(jù)轉(zhuǎn)換、統(tǒng)計等場景。

總結(jié)

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