在做項目過程中，有時會出現同一個需求，在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次的渲染結果 都是從緩存中獲取的屬性值。計算價格的同理。】