Vue中computed、methods、watch的聯系和區別

computed是計算樹形，methods是方法。

new Vue({
　　el: '#example',
　　data: {
　　　　message: 'Hello'
　　},
　　computed: {
　　　　reversedMessage: function () {
　　　　　return this.message.split('').reverse().join('')
　　　　}
　　},
　　methods: {
　　　　reversedMessage: function () {
　　　　　return this.message.split('').reverse().join('')
　　　　}
　　}
})

兩種方法執行的結果是一樣的，不同的是computed計算屬性是基於他們的依賴進行緩存的，computed只有在它的相關依賴發生改變時才會重新求職。這就意味着只要message還沒有發生改變，多次訪問reversedMessage，計算屬性就會立即返回之前的計算結果，而不會再次執行函數。method只要發生重新渲染，methods調用總會執行該函數。

總之：數據量大，需要緩存的時候用computed；每次確實需要重新加載，不需要緩存時用methods。

 

computed 和 watch 都可以觀察頁面的數據變化。當處理頁面的數據變化時，我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性，而不是命令是的watch回調。 

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

雖然計算屬性在大多數情況下是非常適合的，但是在有些情況下我們需要自定義一個watcher，在數據變化時來執行異步操作，這時watch是非常有用的。