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

更新時(shí)間：2019年11月21日 09:25:01 作者：VanMess

這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

watch與computed、filter：

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

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

filter:js中為我們提供的一個(gè)方法，用來(lái)幫助我們對(duì)數(shù)據(jù)進(jìn)行篩選

watch與computed的區(qū)別:

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

2.watch不會(huì)緩存數(shù)據(jù)，每次打開(kāi)頁(yè)面都會(huì)重新加載一次，

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

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

filter 與 computed 的區(qū)別

1. 觸發(fā)時(shí)機(jī)不同

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

filter 則顯的簡(jiǎn)單很多，只在顯式調(diào)用時(shí)觸發(fā)，一般應(yīng)用在模板渲染上。優(yōu)點(diǎn)是容易在組件外抽象；缺點(diǎn)是每次模板渲染時(shí)都需要重新執(zhí)行計(jì)算。可以通過(guò)示例感受調(diào)用時(shí)機(jī)的區(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支持鏈?zhǔn)秸{(diào)用，這為其增加了組合拼接的能力：

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

3. 定義方式

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章: