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

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

一、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也會改變。

適用場景：

二、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不一樣。

適用場景：

三、methods

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

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

總結：

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

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