一、計算屬性

當頁面中有某些資料依賴其他資料進行變動的時候，可以使用計算屬性。

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

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

// ...
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
 

computed屬性不能與data一樣，不然無法computed，由於已經在data之中定義，所以會報錯The computed property "xxx" is already defined in data

二、watch

很多人覺得watch和computed很相似，watch用於觀察和監聽頁面上的vue例項，當然在大部分情況下我們都會使用computed，但如果要在資料變化的同時進行非同步操作或者是比較大的開銷，那麼watch為最佳選擇。watch為一個物件，鍵是需要觀察的表示式，值是對應回撥函式。值也可以是方法名，或者包含選項的物件。直接引用文件例子

var vm = new Vue({
        el: '#app',
        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
            }
        }
    })

三、methods

方法，跟前面的都不一樣，我們通常在這裡面寫入方法，只要呼叫就會重新執行一次，相應的有一些觸發條件，在某些時候methods和computed看不出來具體的差別，但是一旦在運算量比較複雜的頁面中，就會體現出不一樣。

需要注意的是，computed是具有快取的，這就意味著只要計算屬性的依賴沒有進行相應的資料更新，那麼computed會直接從快取中獲取值，多次訪問都會返回之前的計算結果。

總結：

在computed和watch方面，一個是計算，一個是觀察，在語義上是有區別的。

計算是通過變數計算來得出資料。而觀察是觀察一個特定的值，根據被觀察者的變動進行相應的變化，在特定的場景下不能相互混用，所以還是需要注意api運用的合理性和語義性。