1.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' } } })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

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

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

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