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

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

計算屬性是基於它們的依賴進行緩存的，只有在它的相關依賴發生改變時才會重新求值。

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

這就意味著只要 message 還沒有發生改變，多次訪問 computedTest計算屬性會立即返回之前的計算結果，而不必再次執行函數。

相比而言，只要發生重新渲染，method 調用總會執行該函數。

調用

<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>

在HTML的插值裏

1. computed定義的方法我們是以屬性訪問的形式調用的，{{computedTest}}
2. 但是methods定義的方法，我們必須要加上()來調用，如{{methodTest()}}，否則，視圖會出現test1的情況，見下圖

computed的緩存功能

在上面的例子中，methods定義的方法是以函數調用的形式來訪問的，那麽test2-1,test2-2,test2-3是反復地將methodTest方法運行了三遍，如果我們碰到一個場景，需要1000個methodTest的返回值，那麽毫無疑問，這勢必造成大量的浪費
更恐怖的是，如果你更改了message的值，那麽這1000個methodTest方法每一個又會重新計算。。。。

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

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

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

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

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

computed的其它說明

• computed其實是既可以當做屬性訪問也可以當做方法訪問
• computed的由來有一個重要原因，就是防止文本插值中邏輯過重，導致不易維護

computed和watch

Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：watch 屬性，在路由場景有使用：vue學習之router

<div id="demo">{{ fullName }}</div>

var vm = new Vue({ 
 el: ‘#demo‘,  
data: {   
 　　firstName: ‘Foo‘,
    lastName: ‘Bar‘,  
  　fullName: ‘Foo Bar‘
  }, 
 watch: {   
 firstName: function (val) { 
     this.fullName = val + ‘ ‘ + this.lastName  
  },   
 lastName: function (val) {      
　　this.fullName = this.firstName + ‘ ‘ + val   
 }
  }
})

上面代碼是命令式的和重復的。將它與 computed 屬性的版本進行比較：

var vm = new Vue({  
　　el: ‘#demo‘,  
　　data: {    
　　　　firstName: ‘Foo‘,    
　　　　lastName: ‘Bar‘  
　　},  
　　computed: {    
　　　　fullName: function () {      
　　　　　　　　return this.firstName + ‘ ‘ + this.lastName    
　　　　}  
　　}
})

總之：盡量用computed計算屬性來監視數據的變化，因為它本身就這個特性，用watch沒有computed“自動”，手動設置使代碼變復雜。

computed，methods,watch