vue-监听属性watch

监视属性：

1.使用方法：

1. 新添加一个配置项watch
2. 在watch配置项里面，创建一个对象（这个对象计算我们要监听属性的名字）
3. 在对象里面添加方法：handler(a,b)，当属性改变时，这个方法就会被调用（有两个返回值，new和old）

2.其他配置属性：

1. 深度监视（下面例子详解）
   deep：true
   可以监视对象里边的属性

2. 立即执行一次
   immediate：true

3.例子

    <div>
      今天的温度:<span>{{wenDu}}</span>  <br>
      加一度：<input type="button" @click="wenDu++" value="+"><br>
      减一度：<input type="button" @click="wenDu--" value="-">
      <br><br><br><br>
      深度监视：<input type="button" @click="number.a++" value="a加一">{{number.a}}<br>
      深度监视：<input type="button" @click="number.b++" value="b加一">{{number.b}}
    </div>
<script>
  var vm =new Vue({
    el:'div',
    data:{
      wenDu:'20',
      number:{
        a:1,
        b:2
      }
    },
    watch:{
      wenDu:{
        immediate:false,
        handler(NEW,OLD){
            console.log("之前的温度是:"+OLD+"现在的温度是:"+NEW)
        }
      }
    }
  })


  /* 深度监视
  * 1. 如果不加deep的话，那么他监视的是number，
  *    由于number是一个对象，那么他监视的就是一个地址
  *    只要这个地址不改变那么就不会触发
  * 2.  但是加了deep的话，就是监视的number里面的内容了
  * */
   vm.$watch('number',{
     deep:true,//倘若不加这个deep，那么就监视不到number内容的改变
     handler(NEW,OLD){
       console.log("number对象改变了")
     }
   }
 )
</script>

4.其他

1. 第二种写法：
   获取vue对象后，使用￥watch方法
2. 简写：
   与计算属性相似，倘若只是用handler方法，就可以使用简写