Vue中watch侦听器使用方法（普通监听与深度监听）

 本文将介绍在watch中对一个单独变量、对象中的某个属性、对象整体的监听的一般方法，以及深度监听的方法。

一、普通监听方式

1、监听一个变量的值变化

<!--页面-->
<template>
  <div>
   监听单个变量的变化:
   <input type="text" v-model="singleData">
  </div>
</template>

  <!--js-->
  data () {
    return {
      singleData:'我是初始值'
    }
  },
  watch:{
    singleData(newVlaue,oldValue){
      console.log('新值：'+newVlaue);
      console.log('旧值：'+oldValue);
    }
  }

 结果如下：

 

2、监听一个对象中的单个属性值的变化

<!--页面-->
<template>
  <div>
   监听obj中data1属性的变化:
   <input type="text" v-model="obj.data1">
   <br>
    监听obj中data2属性的变化:
   <input type="text" v-model="obj.data2">
  </div>
</template>

  <!--js-->
  data () {
    return {
      obj:{
        data1:'我是data1的初始值',
        data2:'我是data2的初始值'
      }
    }
  },
  watch:{
    'obj.data1':function(newvalue,oldvalue){
      console.log('data1变化前的值：'+oldvalue);
      console.log('data1变化后的值：'+newvalue);
    },
    'obj.data2':function(newvalue,oldvalue){
      console.log('data2变化前的值：'+oldvalue);
      console.log('data2变化后的值：'+newvalue);
    }
  },

结果如下：

二、深度监听 

 1、监听一个对象整体的变化（即监听对象所有属性值的变化）

<!--页面-->
<template>
  <div>
   监听obj中data1属性的变化:
   <input type="text" v-model="obj.data1">
   <br>
    监听obj中data2属性的变化:
   <input type="text" v-model="obj.data2">
  </div>
</template>

 <!--js-->
 data () {
    return {
      obj:{
        data1:'我是data1的初始值',
        data2:'我是data2的初始值'
      }
    }
  },
  watch:{
    obj:{
      handler:function(newvalue){
        console.log('新值：');
        console.log(newvalue);
      },
      deep:true//deep置为true表示：对象中任一属性值发生变化，都会触发handler中的方法
    }
  },

效果如下：

 2、以上三种方式监听，都只会在变量改变、对象的属性值变化的时候才会触发，即：初始化绑定的时候并不会触发。那么如何在初始化绑定的时候就触发监听事件，拿到初始值呢？

使用immediate，在页面初始化，属性值还没变化的时候就会触发handler方法

    obj:{
      handler:function(newvalue){
        console.log('新值：');
        console.log(newvalue);
      },
      deep:true,//对象中任一属性值变化都会触发handler方法
      immediate:true//初始化绑定时就会执行handler方法
    }

结果如下：

---

 有问题或意见，欢迎留言讨论！