文章目錄

• • 1、實例
  • 2、computed計算屬性中：
  • • 前提1、當計算屬性fn2沒有依賴data中的數據時：
    • 前提2、：當計算屬性依賴data中的數據時：
  • 3、區別：

在做項目過程中，有時會出現同一個需求，在methods屬性中寫方法可以實現需求，在computed屬性中寫方法也可以實現需求。那么，既然在methods屬性中可以實現我想要的需求，為什么還會有computed計算屬性呢？接下來，我們一起看看兩者之間有什么區別。

1、實例

<p>methods中方法</p> //fn1是方法，調用方法需要加（）<p>{{fn1()}}</p><p>{{fn1()}}</p><p>{{fn1()}}</p> methods: {fn1() {console.log('fn1------------');return new Date()}}

執行結果：

通過執行結果，可以看出：
methods中的方法：每調用一次，就觸發一次。

<p>computed中的方法</p> // fn2是屬性，調用時不能加（）【看著像是方法，其實是屬性（計算屬性）】<p>{{fn2}}</p><p>{{fn2}}</p><p>{{fn2}}</p> computed: {fn2() {console.log('fn2------------');return new Date()}},

執行結果：

通過執行結果，可以看出：計算屬性fn2調用3次，但是實際執行輸出只打印1次。也就是說，計算屬性fn2多次調用，一次執行。

2、computed計算屬性中：

前提1、當計算屬性fn2沒有依賴data中的數據時：

結果：第一次使用計算屬性時，會把第一次的結果進行緩存。后面再使用幾次計算屬性，都會去第一次的結果進行查找。
計算屬性使用時不加（）。
methods中的方法調用幾次就會執行幾次，沒有緩存，性能較低；
computed中的函數多次調用時只會調用一次，多次執行，是有緩存的，性能較高。

前提2、：當計算屬性依賴data中的數據時：

data中數據發生變化（與上一次緩存的數據比較）才會調用計算屬性中的方法。例如上一篇博客中的例子（相關代碼在上一篇博客中：Vue項目中如何使用computed計算屬性）：

3、區別：

methods和computed看起來都可以實現我們的功能，為什么還要多一個計算屬性這個東西呢？

原因：計算屬性會進行緩存，如果多次使用時，計算屬性沒有依賴data中的數據，計算屬性只會調用一次。如果計算屬性依賴data中的數據時，只有當data中的數據發生變化（與它最近一次的緩存數據相比），計算屬性才會被調用執行，否則不會被調用，只會從緩存中拿數據。
methods 方法和computed計算屬性 兩者的執行結果是完全相同的。

【計算屬性是基于它們的依賴進行緩存的，只有在相關依賴發生變化時它們才會重新求值。也就是說，只要它的依賴沒有發生變化，那么每次訪問的時候，計算屬性都會立即返回之前的計算結果。不再執行函數。
methods方法，每當觸發重新渲染時，調用方法將總是再次執行函數。
計算屬性具有緩存功能，而methods沒有。

所以，上面的例子中，當多次調用methods方法時，fn1會被打印3次，而當多次調用計算屬性時，第一次調用時，會把屬性值進行緩存， 會打印出一個fn2），當第二次調用時，會先把屬性值和緩存中的值作比較，如果值沒有改變，則會直接從緩存中取值進行渲染。以此類推，由于調用3次fn2，而屬性值一直沒有改變過，所以實際上只會調用一次fn2,打印輸出一次fn2。其余2次的渲染結果 都是從緩存中獲取的屬性值。計算價格的同理。】

總結

以上是生活随笔為你收集整理的关于Vue中计算属性computed和methods属性的区别，你了解多少呢的全部內容，希望文章能夠幫你解決所遇到的問題。

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