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

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中的handleAdd()方法後返回的結果 -->
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中屬性的名稱。