vue的监视属性

目录

• • • 1. 场景引入
    • 2. watch
    • 3. 深度监视
    • 4. 监视属性简写
    • 5. 小结

      1. 场景引入

      在实际开发中，有时开发者需要根据某个属性的变化，做出相应的决策，因此Vue为开发者提供了watch.这一监视属性，用于实现此类需求。比如下面这个场景，开发者要监测天气的变化，每次点击切换天气，就会变化，要求我们对不同的天气做出不同的处理。

      

      

      
      
          
          Title
          
      
      
      
          
      今天天气很{{info}}
          切换天气
      
      
      
          Vue.config.productionTip = false;
          const vm = new Vue({
              el:'#root',
              data:{
                  isHot:true,
              },
              computed:{
                  info(){
                      return this.isHot ? '炎热':'寒冷'
                  }
              },
              methods:{
                  changeWeather(){
                      this.isHot = !this.isHot
                  }
              },
          })
      
      
      

      2. watch

      我们在vm中加入watch属性，

      监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；

      接收两个参数：

      **newValue：**表示新的值

      **oldValue：**表示改变前的值

      

              watch:{
                  isHot:{
                      handler(newValue,oldValue){
                          console.log("天气被修改了"+newValue+oldValue);
                      }
                  }
      

      我们再次尝试，控制台打印出了天气的变化

      

      immediate属性

      实现初始化的时候调用一次监视函数handler，默认为false

         watch:{
                  isHot:{
                      immediate:true,
                      handler(newValue,oldValue){
                          console.log("天气被修改了"+newValue+oldValue);
                      }
                  }
      

      

      同时watch存在第二种写法，在vm对象外面

      

      3. 深度监视

      watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性

      监视多级结构中某个属性的变化

      watch:{ “numbers.a”:{ … } } //numbers是data上的一个key，里面包含a

      这里注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号

      deep属性

      用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化

      

      
      
          
          Title
          
      
      
      
          
      今天天气很{{info}}
          切换天气
      
          点我a++
          
      {{numbers.a}}
          点我b++
          
      {{numbers.b}}
      
      
      
          Vue.config.productionTip = false;
          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:{
                  numbers:{
                      deep:true,
                      handler(){
                          console.log('numbers被修改');
                      }
                  }
              }
      })
      
      

      /* vm.$watch(‘isHot’,{

      immediate:true,

      handler(newValue,oldValue){

      console.log(“天气被修改了”+newValue+oldValue);

      }

      })*/

      

      可以看到，点击a或者b++的按钮是有被检测到的

      

      4. 监视属性简写

      与计算属性类似，当不需要使用其他属性，只使用handler属性时，可以使用简写形式

        isHot(newValue,oldValue){
                      console.log("天气被修改了"+newValue+oldValue);
                  }
      

      函数写法：

      vm.$watch('isHot',function(newValue,oldValue){
                  console.log("天气被修改了"+newValue+oldValue);
              }
      

      5. 小结

      小结一下：