vue中computed、metfods、watch的區別

一、computed和methods

我們可以將同一函數定義為一個 method 或者一個計算屬性。對于最終的結果，兩種方式確實是相同的。

不同的是computed計算屬性是基于它們的依賴進行緩存的。計算屬性computed只有在它的相關依賴發生改變時才會重新求值。這就意味著只要計算依賴的值還沒有發生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執行函數。而對于method ，只要發生重新渲染，method 調用總會執行該函數。

當有一個性能開銷比較大的的計算屬性?A?，它需要遍歷一個極大的數組和做大量的計算。然后我們可能有其他的計算屬性依賴于?A?，這時候，我們就需要緩存！

但是，緩存也有自己的缺點：

也同樣意味著下面的計算屬性將不再更新，因為?Date.now()?不是響應式依賴：

computed: {now: function () {return Date.now()}
}    

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

二、computed和watch

computed 和 watch 都可以觀察頁面的數據變化。當處理頁面的數據變化時，我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性，而不是命令是的watch回調。?computed 計算屬性只有在相關的數據發生變化時才會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。而不必想 motheds方法 和 watch 方法是的每次都去執行函數。

這里我直接引用vue官網的例子來說明：

html:

我們要實現 第三個表單的值 是第一個和第二個的拼接，并且在前倆表單數值變化時，第三個表單數值也在變化

<div id="myDiv"><input type="text" v-model="firstName"><input type="text" v-model="lastName"><input type="text" v-model="fullName">
</div>

js: 用watch方法來實現

new Vue({el: '#myDiv',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}}
})

js: 利用computed 來寫

new Vue({el:"#myDiv",data:{firstName:"Den",lastName:"wang",},computed:{fullName:function(){return  this.firstName  + " " +this.lastName;}}})

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