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