淺析Vue中computed與method的區別

其實官方文檔對這個已經說的很清楚了，筆者不過是在其基礎上進行概括總結，各位看官仍是先去 讀一下官方文檔吧

1.computed區別於method的兩個核心

在官方文檔中，強調了computed區別於method最重要的兩點

1. computed是屬性調用，而methods是函數調用
2. computed帶有緩存功能，而methods不是

OK，下面咱們看一個具體的例子

<!--HTML部分-->
<div id="app">
    <h1>{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>

<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '如今我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '如今我用的是computed'
        }
    }
})

2. computed的屬性調用

細心的朋友可能已經發現了，在HTML的插值裏

1. computed定義的方法咱們是以屬性訪問的形式調用的，{{computedTest}}
2. 可是methods定義的方法，咱們必需要加上()來調用，如{{methodTest()}}，不然，視圖會出現test1的狀況，見下圖

3. 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也只會計算一次而已

4. computed的其它說明

• computed實際上是既能夠當作屬性訪問也能夠當作方法訪問
• computed的由來有一個重要緣由，就是防止文本插值中邏輯太重，致使不易維護