【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中属性的名称。