監(jiān)測屬性

1.當(dāng)被監(jiān)測的屬性變化時(shí)，回調(diào)函數(shù)會自動調(diào)用，進(jìn)行相關(guān)操作 2.監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視！?。?3.監(jiān)視的兩種寫法 （1）new Value時(shí)傳入watch配置 （2）通過vm.$watch監(jiān)視

頁面

 <!-- 綁定事件的時(shí)候：@xxx = "yyy" yyy可以寫一些簡單的語句 -->-
<button @click = "isHot = !isHot">切換天氣</button>
 <button @click = "changeWeather">切換天氣</button>

實(shí)現(xiàn)

 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,//初始化時(shí)讓handler調(diào)用一次
                      //handler什么時(shí)候調(diào)用？當(dāng)isHot發(fā)生改變時(shí)
                      handler(newValue,oldValue){

                      }
            })

深度監(jiān)視

（1）Vue中的watch默認(rèn)不監(jiān)測對象內(nèi)部值的改變（一層） （2）配置deep:true可以監(jiān)測對象內(nèi)部值的改變（多層） 備注： （1）Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch默認(rèn)不可以 （2）使用watch時(shí)根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視
deep:true監(jiān)視多級結(jié)構(gòu)中所以屬性的變化

頁面

 <div id="root">
           <h2>今天天氣很{{info}}</h2>
           <button @click = "changeWeather">切換天氣</button>
           <hr/>
           <h2>a的值是{{numbers.a}}</h2>
           <button @click = "numbers.a++">點(diǎn)我讓a+1</button>
           <hr/>
           <h2>b的值是{{numbers.b}}</h2>
           <button @click = "numbers.b++">點(diǎn)我讓b+1</button>
         </div>

實(shí)現(xiàn)

 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,//初始化時(shí)讓handler調(diào)用一次
                      handler(newValue,oldValue){
                      }
                  },
                  //監(jiān)視多級結(jié)構(gòu)中某個(gè)屬性的變化
                  /*
                  'numbers.a':{
                      handler(){
                      }
                  }*/
                  //監(jiān)視多級結(jié)構(gòu)中所以屬性的變化
                  numbers:{
                      deep:true,
                      handler(){
                      }
                  }
                }
            })

監(jiān)視屬性_簡寫

頁面

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

實(shí)現(xiàn)

 watch:{
         //正常寫法
           isHot:{
                    //   immediate:true,//初始化時(shí)讓handler調(diào)用一次
                    //   deep:true,//深度監(jiān)視
                handler(newValue,oldValue){ }
                  },

                   //簡寫
                   isHot:{
                      handler(newValue,oldValue){
                    }
                }

 //正常寫法
 vm.$watch('isHot',{
      immediate:true,//初始化時(shí)讓handler調(diào)用一次
          handler(newValue,oldValue){
     }
 }

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