vue中methods、watch、computed之間的差異對比以及適用場景

首先要說，methods,watch和computed都是以函數爲基礎的，但各自卻都不一樣； 

1、computer

當頁面中有某些數據依賴其餘數據進行變更的時候，能夠使用計算屬性。

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

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

須要注意的是，就算在data中沒有直接聲明出要計算的變量，也能夠直接在computed中寫入。

計算屬性默認只有getter，能夠在須要的時候本身設定setter：

// ...
    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]
            }
        }
    }

這個時候在控制檯直接運行vm.fullName = ‘bibi wang’，相應的firstName和lastName也會改變。

適用場景：

2、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
            }
        }
    })

若是在data中沒有相應的屬性的話，是不能watch的，這點和computed不同。

適用場景：

3、methods

方法，跟前面的都不同，咱們一般在這裏面寫入方法，只要調用就會從新執行一次，相應的有一些觸發條件，在某些時候methods和computed看不出來具體的差異，可是一旦在運算量比較複雜的頁面中，就會體現出不同。

須要注意的是，computed是具備緩存的，這就意味着只要計算屬性的依賴沒有進行相應的數據更新，那麼computed會直接從緩存中獲取值，屢次訪問都會返回以前的計算結果。

總結：

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

計算是經過變量計算來得出數據。而觀察是觀察一個特定的值，根據被觀察者的變更進行相應的變化，在特定的場景下不能相互混用，因此仍是須要注意api運用的合理性和語義性。