1.computed

• computed是一種計算屬性，用來監聽屬性的變化；
• computed裏面的方法調用的時候不需要加()，並且裏面的方法必須要有一個返回值；
• computed裏面的方法不是通過事件來去觸發的，而是當data中的屬性發生了改變的時候會被觸發；
• computed最大的特點是當屬性沒有發生改變的時候，當前方法的值會從緩存中讀取。

1 <div id="app">
2 　　<input type="text" v-model.number="a">
3 　　<input type="text" v-model.number="b"
 
>
4 　　<button @click="handleAdd()">計算</button>
5 　　<p>結果為:{{sum}}</p>  <!-- 執行methods中的add()方法後返回的結果 -->
6 　　<p>computed結果：{{count}}</p>  <!-- 執行computed中的count()方法後返回的結果 -->
7 </div>

 1 new Vue({
 2      el:"#app",
 3      data:{
 4         a:"",
 
 5         b:"",
 6         sum:""
 7      },
 8      methods:{
 9         handleAdd(){
10             this.sum = this.a+this.b; //只有點擊事件觸發時才會改變
11         }
12      },
13      computed:{
14         count(){
15            return this.a+this.b;  //實時監聽，只要data中數據發生改變返回的結果就會改變
16         }
17      }
 
18  })

2. watch

• watch用來監聽每一個屬性的變化；
• watch這個對象裏面都是函數,函數的名稱是data中的屬性名稱,watch中的函數是不需要調用的；
• 當屬性發生改變時就會觸發watch中的函數,每一個函數都會接受到2個值，一個值是新值，一個是舊值。可以在watch當中進行新舊值的判斷來減少虛擬DOM的渲染；
• 只要屬性發生改變就會觸發它所對應的函數；
• 如果我們需要對對象進行監聽的時候，需要將屬性設置為key值，val值為一個對象。對象中有2個參數，一個是handler函數，另一個是deep為true，這樣才能實現深度監聽。

1 <div id="app">
2     <input type="text" v-model.number="a">
3     <input type="text" v-model.number="b">
4     <p>結果:{{sum}}</p>
5     <hr>
6     <input type="text" v-model="obj.name">
7     <input type="text" v-model="obj.age">
8 </div>

 1 new Vue({
 2         el:"#app",
 3         data:{
 4             a:"",
 5             b:"",
 6             sum:"",
 7             obj:{
 8                 name:"pinpinkc",
 9                 age:18
10             }
11         },
12         watch:{
13             a(newVal,oldVal){
14                 if(newVal != oldVal){
15                    this.sum = newVal+this.b;
16                 }
17                 console.log("a發生了改變",newVal,oldVal)
18             },  
19             b(newVal,oldVal){
20                 this.sum = newVal+this.a;
21                 console.log("b發生了改變",newVal,oldVal)
22             },
23             obj:{
24                 handler(newVal){
25                     console.log("obj發生了改變",newVal)
26                 },
27                 deep:true
28             }
29         }
30     })

3. computed與watch的區別

• computed在調用的時候不需要加() , watch不需要調用；
• computed如果屬性沒有發生改變的時候會存緩存中讀取值 ， watch當屬性發生改變的時候會接受到2個值，一個為新值，一個為舊值；
• computed裏面的函數必須要有一個return返回結果；
• watch如果需要監聽對象的情況下必須設置深度監聽；
• computed裏面函數的名稱可以隨意命名，但是watch中函數的名稱必須是data中屬性的名稱。

【Vue】----- computed與watch的區別