【Vue】----- computed与watch的区别

1.computed

• computed是一种计算属性，用来监听属性的变化；
• computed里面的方法调用的时候不需要加()，并且里面的方法必须要有一个返回值；
• computed里面的方法不是通过事件来去触发的，而是当data中的属性发生了改变的时候会被触发；
• computed最大的特点是当属性没有发生改变的时候，当前方法的值会从缓存中读取。

 <div id="app">
 　　<input type="text" v-model.number="a">
 　　<input type="text" v-model.number="b">
 　　<button @click="handleAdd()">计算</button>
 　　<p>结果为:{{sum}}</p>  <!-- 执行methods中的handleAdd()方法后返回的结果 -->
 　　<p>computed结果：{{count}}</p>  <!-- 执行computed中的count()方法后返回的结果 -->
 </div>

 new Vue({
      el:"#app",
      data:{
         a:"",
         b:"",
         sum:""
      },
      methods:{
         handleAdd(){
             this.sum = this.a+this.b; //只有点击事件触发时才会改变
         }
      },
      computed:{
         count(){
            return this.a+this.b;  //实时监听，只要data中数据发生改变返回的结果就会改变
         }
      }
  })

2. watch

• watch用来监听每一个属性的变化；
• watch这个对象里面都是函数,函数的名称是data中的属性名称,watch中的函数是不需要调用的；
• 当属性发生改变时就会触发watch中的函数,每一个函数都会接受到2个值，一个值是新值，一个是旧值。可以在watch当中进行新旧值的判断来减少虚拟DOM的渲染；
• 只要属性发生改变就会触发它所对应的函数；
• 如果我们需要对对象进行监听的时候，需要将属性设置为key值，val值为一个对象。对象中有2个参数，一个是handler函数，另一个是deep为true，这样才能实现深度监听。

 <div id="app">
     <input type="text" v-model.number="a">
     <input type="text" v-model.number="b">
     <p>结果:{{sum}}</p>
     <hr>
     <input type="text" v-model="obj.name">
     <input type="text" v-model="obj.age">
 </div>

 new Vue({
         el:"#app",
         data:{
             a:"",
             b:"",
             sum:"",
             obj:{
                 name:"pinpinkc",
                 age:18
             }
         },
         watch:{
             a(newVal,oldVal){
                 if(newVal != oldVal){
                    this.sum = newVal+this.b;
                 }
                 console.log("a发生了改变",newVal,oldVal)
             },
             b(newVal,oldVal){
                 this.sum = newVal+this.a;
                 console.log("b发生了改变",newVal,oldVal)
             },
             obj:{
                 handler(newVal){
                     console.log("obj发生了改变",newVal)
                 },
                 deep:true
             }
         }
     })

3. computed与watch的区别

• computed在调用的时候不需要加() , watch不需要调用；
• computed如果属性没有发生改变的时候会存缓存中读取值 ， watch当属性发生改变的时候会接受到2个值，一个为新值，一个为旧值；
• computed里面的函数必须要有一个return返回结果；
• watch如果需要监听对象的情况下必须设置深度监听；
• computed里面函数的名称可以随意命名，但是watch中函数的名称必须是data中属性的名称。