在vue裡面methods跟computed分別是什麼？他們使用上有什麼差別？
簡單來說:
Method 是一位凡事親力親為，任何事都願意做的人
Computed 是一位自私自利的人，只有跟自己有相關的事，他才願意做事，其餘的事情他一概不碰
當我們在做一筆資料做更新時：
Method 不管資料有沒有跟它有關係，它一律皆作業更新
Computed 資料跟它有相關，它才更新，以程式操作系統來說它會比較有效率
🦉 從作用機制上：
methods，watch 和computed 都是以函數為基礎的，但各自卻都不同watch 和computed 都是以Vue 的依賴追踪機制為基礎的，當某一個數據發生變化的時候，所有依賴這個數據的“相關”數據“自動”發生變化，也就是自動調用相關的函數去實現數據的變動對 methods：methods 裡面是用來定義函數的，它需要手動調用才能執行。 而不像watch 和computed 那樣，“自動執行”預先定義的函數，相比於watch / computed，methods 不處理數據邏輯關係，只提供可調用的函數
從性質上：
methods函數裡面定義的是，仍然需要去調用它。computed計算屬性事實上和data 對象裡的數據屬性是同一類的（使用上）。watch：類似於監聽機制+事件機制
methodsVue method是與 Vue 實例中關聯的對象。
函數是被定義在method的事件中，當你需要使用執行某些指令含有v-on的元素來操作處理事件時，method語法有很大的作用。
我們可以進一步調用method語法來定義函數的執行操作。在methods 中定義語法
我們可以使用 methods 屬性給Vue 定義語法，methods的基本語法：1
2
3
4
5var vm = new Vue({
methods:{
// 在此時定義語法，語法之間使用逗號作分隔
語法名:function(){}
});1
2
3
4
5methods:{
show: function(){
console.log("顯示内容")
}
}在語法中訪問屬性
在 methods 方法中訪問 data 的數據，可以直接通過 this.属性名 的形式來訪問。例如：
我們在 show 方法中，訪問 number 屬性，可以直接通過 this.number 形式訪問，其中 this 表示的就是Vue 實例對象：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<script>
new Vue({
el: '#app',
data(){
return{
number: 100
}
},
methods:{
show: function(){
console.log(this.number);
}
}
});
</script>如果是在Vue 構造函數外部，可以使用 vm.方法名 定義或調用方法，還可以通過 vm.$data.属性名 來訪問 data 中的數據。
computed 計算屬性
計算屬性在處理一些複雜邏輯時是很有用的。
- 除非computed依存的變數內容有變，不然computed不會重新運算
- 只有在computed依存的變數改變時，computed才會重新計算／回傳結果
- 上述示範的
now()永遠不會更新其回傳的內容，因為now()中的Date.now()並非reactive dependency
1
2
3
4
5computed: {
now () {
return Date.now()
}
}**
methods 與 computed 區別：用computed 屬性方法編寫的邏輯運算，在調用時直接將返回時areas 視為一個變量值就可使用，無需進行函數調用。computed 具有緩存功能，在系統剛運行的時候調用一次。只有隻有當計算結果發生變化才會被調用。例如，我們在長度框與寬度框更改值的時候每次更改computed 都會被調用一次，很浪費資源。
用methods 方法編寫的邏輯運算，在調用時add() 一定要加“()”，methods 裡面寫的多位方法，調用方法一定要有（）。methods方法頁面剛加載時調用一次，以後只有被調用的時候才會被調用。我們在長度框和寬度框的值輸入完以後，點擊“+” methods 方法調用一次。這裡很明顯我們採用methods 會更節省資源。
🦉 我們可以使用methods 來替代computed，效果上兩個都是一樣的，但是computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。
而使用methods ，在重新渲染的時候，函數總會重新調用執行。設計一個計算成績和的案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54**<!DOCTYPE html>**<html lang**=**"en">
<head>
<meta charset**=**"UTF-8">
<meta name**=**"viewport" content**=**"width=device-width, initial-scale=1.0">
<meta http-equiv**=**"X-UA-Compatible" content**=**"ie=edge">
<title>計算屬性與監聽器</title>
*<!-- 引入Vue.js -->*<script src**=**"./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id**=**"app">
數學：<input type**=**"text" v-model**=**"mathScore">
英文：<input type**=**"text" v-model**=**"englishScore"><br>*<!-- 注意：調用methods的方法一定要加括號 -->*
總分（methods方式）：<input type**=**"text" v-model**=**"sumScore()"><br>*<!-- 注意：調用computed裡面的方法不要加括號 -->*
總分（computed，純get方式）：<input type**=**"text" v-model**=**"sumScore1"><br>
總分（computed，get+set方式）：<input type**=**"text" v-model**=**"sumScore2">
</div>
<script>
**var** vm **=** **new** Vue({
el**:** '#app',
data**:** {
mathScore**:** 80,
englishScore**:** 60
},
methods**:** {
sumScore**:** **function** () {
console.log("methods方式調用！");
**return** (**this**.mathScore **-** 0) **+** (**this**.englishScore **-** 0);
}
},
computed**:** {
*// 默認是純get方式，也是單項綁定*
sumScore1**:** **function** () {
console.log("compute的純get方式調用");
**return** (**this**.mathScore **-** 0) **+** (**this**.englishScore **-** 0);
},
*// 採用get加set方式*
sumScore2**:** {
get**:** **function** () {
console.log("compute的get方式調用");
**return** (**this**.mathScore **-** 0) **+** (**this**.englishScore **-** 0);
},
*// 當在輸入框中更改了總分後，兩項成績就會分別取到新總分的平均值，從而實現雙向綁定*
set**:** **function** (newValue) {
console.log("compute的set方式調用");
**var** avgScore **=** newValue **/** 2;
**this**.mathScore **=** avgScore;
**this**.englishScore **=** avgScore;
}
}
}
})
</script>
</body>
</html>- 調用方式不同
computed直接以對象屬性方式調用，不需要加括號。
而methods必須要函數執行才可以得到結果。 - 綁定方式不同
methods與compute純get方式都是單向綁定，不可以更改輸入框中的值。
compute的get與set方式是真正的雙向綁定。 - 是否存在緩存
methods沒有緩存，調用相同的值計算還是會重新計算。
competed有緩存，在值不變的情況下不會再次計算，而是直接使用緩存中的值。
- 調用方式不同