一、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“自動”，手動設置使代碼變復雜。

轉載于:https://www.cnblogs.com/cassiel/p/9104765.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue中computed、metfods、watch的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。