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

watch與computed、filter：

成都創(chuàng)新互聯(lián)長期為上千余家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為承德企業(yè)提供專業(yè)的成都網站制作、成都網站設計、外貿營銷網站建設，承德網站改版等技術服務。擁有十年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

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

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

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

watch與computed的區(qū)別:

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

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

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

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

filter 與 computed 的區(qū)別

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

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

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

2. 應用范圍不同

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

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 函數(shù)定義：

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

應用規(guī)則

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

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

總結

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

當前文章：Vue中filter與computed的區(qū)別與用法解析
網頁地址：http://muchs.cn/article28/pisdcp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站內鏈、網站制作、關鍵詞優(yōu)化、網站維護、動態(tài)網站、網站排名

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)