談談vue.js中methods watch和compute的區別和聯繫

最近一直在項目開發中使用Vue.js，對於Vuejs中的computed、methods、watch的理解一直不是很透徹，通過多方查資料作demo，今天經過這篇文章給你們介紹下關於vue中計算屬性（computed）、methods和watched之間的區別：

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

1.watch和computed都是以Vue的依賴追蹤機制爲基礎的，它們都試圖處理這樣一件事情：當某一個數據（稱它爲依賴數據）發生變化的時候，全部依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變更。

2.對methods:methods裏面是用來定義函數的，很顯然，它須要手動調用才能執行。
  而不像watch和computed那樣，「自動執行」預先定義的函數

 【總結】：methods裏面定義的函數，是須要主動調用的，而和watch和computed相關的函數，會自動調用,完成咱們但願完成的做用

從性質上看：

1.methods裏面定義的是函數，methods是方法，只要調用它，函數就會執行；

2.computed是計算屬性，事實上和和data對象裏的數據屬性是同一類的（使用上）,

<p>原始數據：{{msg}}</p>  
<p>改變後的數據：{{changemsg}}</p>  
var vm=new Vue({ 
el:"#example",   
data:{ 
 msg:"hello",  
},  
computed:{  //計算屬性
    changemsg:function(){  
    return this.msg.split("").reverse().join("");  
    },  
}

你在取用的時候，用this.changemsg去取用，就和取data同樣（不要當成函數調用！！）

computed屬性  VS watched 屬性：

watch和computed各自處理的數據關係場景不一樣

1.watch擅長處理的場景：一個數據影響多個數據

2.computed擅長處理的場景：一個數據受多個數據影響

watched屬性：代碼更易於理解，它指定監測的值是誰，而後相應的改變其餘的值。

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