监视属性watch

监测属性

1.当被监测的属性变化时，回调函数会自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视！！！ 3.监视的两种写法 （1）new Value时传入watch配置 （2）通过vm.$watch监视

页面

 <!-- 绑定事件的时候：@xxx = "yyy" yyy可以写一些简单的语句 -->-
<button @click = "isHot = !isHot">切换天气</button>
 <button @click = "changeWeather">切换天气</button>

实现

 const vm = new Vue({
                 el:"#root",
                 data:{
                     isHot:true
                 },
                 computed:{
                     info(){
                         return this.isHot ? '炎热' : '凉爽'
                     }
                 },
                 methods: {
                    changeWeather(){
                       this.isHot = !this.isHot
                    }
                 },
            })
            vm.$watch('isHot',{
                immediate:true,//初始化时让handler调用一次
                      //handler什么时候调用？当isHot发生改变时
                      handler(newValue,oldValue){

                      }
            })

深度监视

（1）Vue中的watch默认不监测对象内部值的改变（一层） （2）配置deep:true可以监测对象内部值的改变（多层） 备注： （1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以 （2）使用watch时根据数据的具体结构，决定是否采用深度监视
deep:true监视多级结构中所以属性的变化

页面

 <div id="root">
           <h2>今天天气很{{info}}</h2>
           <button @click = "changeWeather">切换天气</button>
           <hr/>
           <h2>a的值是{{numbers.a}}</h2>
           <button @click = "numbers.a++">点我让a+1</button>
           <hr/>
           <h2>b的值是{{numbers.b}}</h2>
           <button @click = "numbers.b++">点我让b+1</button>
         </div>

实现

 const vm = new Vue({
                 el:"#root",
                 data:{
                     isHot:true,
                     numbers:{
                         a:1,
                         b:1
                     }
                 },
                 computed:{
                     info(){
                         return this.isHot ? '炎热' : '凉爽'
                     }
                 },
                 methods: {
                    changeWeather(){
                       this.isHot = !this.isHot
                    }
                 },
                watch:{
                  isHot:{
                      immediate:true,//初始化时让handler调用一次
                      handler(newValue,oldValue){
                      }
                  },
                  //监视多级结构中某个属性的变化
                  /*
                  'numbers.a':{
                      handler(){
                      }
                  }*/
                  //监视多级结构中所以属性的变化
                  numbers:{
                      deep:true,
                      handler(){
                      }
                  }
                }
            })

监视属性_简写

页面

 <h2>今天天气很{{info}}</h2>
           <button @click = "changeWeather">切换天气</button>

实现

 watch:{
         //正常写法
           isHot:{
                    //   immediate:true,//初始化时让handler调用一次
                    //   deep:true,//深度监视
                handler(newValue,oldValue){ }
                  },

                   //简写
                   isHot:{
                      handler(newValue,oldValue){
                    }
                }

 //正常写法
 vm.$watch('isHot',{
      immediate:true,//初始化时让handler调用一次
          handler(newValue,oldValue){
     }
 }

 //简写
vm.$watch('isHot',function(newValue,oldValue){
     console.log(newValue,oldValue)
 })