一、前言

computed區別于method的兩個點：

computed是屬性調用，而methods是函數調用；

computed帶有緩存功能，而methods不是；

下面看一個具體例子：

let vm = new Vue({ el: '#app', data: { message: '我是消息，' }, methods: { methodTest() { return this.message + '現在我用的是methods' } }, computed: { computedTest() { return this.message + '現在我用的是computed' } } })

二、computed 屬性調用

在HTML的插值里computed中定義的方法是以屬性訪問形式調用的，{{computedTest}}

但是methods定義的方法，必須要加上()來調用，如{{methodTest()}}，否則，視圖會出現test1的情況，見下圖

三、computed 緩存功能

首先，要明白緩存究竟有什么用？想必大家都知道HTTP緩存，其核心作用就是對一些服務端未更新的資源進行復用，避免一些無謂的請求，優化用戶體驗。

對于computed也是一樣的：

在上面的例子中，methods定義的方法是以函數調用的形式來訪問，那么test2-1,test2-2,test2-3是反復地將methodTest方法運行了三遍，如果碰到一個場景，需要1000個methodTest的返回值，那么毫無疑問，這勢必造成大量性能浪費。

更恐怖的是，如果更改了message的值，那么這1000個methodTest方法每一個又會重新計算。

所以，官方文檔反復強調對于任何復雜邏輯，都應當使用計算屬性。

computed依賴于data中的數據，只有在它的相關依賴數據發生改變時才會重新求值。

如上例，在Vue實例化的時候，computed定義computedTest方法會做一次計算，返回一個值，在隨后的代碼編寫中，只要computedTest方法依賴的message數據不發生改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計算的結果。

這樣的好處也是顯而易見的，同樣的，如果碰到一個場景，需要1000個computedTest的返回值，那么毫無疑問，這相對于methods而言，將大大地節約內存。哪怕改變了message的值，computedTest也只會計算一次而已。

四 、computed 其它說明

computed其實是既可以當做屬性訪問也可以當做方法訪問。

computed的由來有一個重要原因，就是防止文本插值中邏輯過重，導致不易維護。

五、拓展閱讀

《Vue進階（八十四）：vue中Computed 和 Watch的使用和區別》

《Vue進階（八十三）： updated和watch的區別》

《Vue進階（八十二）：vue 中updated的使用》

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。