vue中watch的用法

1.watch立即触发回调

❝

使用watch立即触发回调的方法,不仅可以监听数据改变,而且可以在页面初始化时加载数据,不需要再在created或mounted中调用$_loadData方法

❞

代码如下:

export default{
    data(){
        return{
            d:''
        }
    }
}
watch:{
     d: {
      handler(newVal,oldVal){
          if(newVal!==oldVal){
             this.$_loadData() 
          }
      },
      immediate: true//立即执行属性
    }
},
methods:{
    $_loadData(){
        console.log("初始化数据")
    }
}
}

2.watch深度监听对象

❝

一个表单页面，需求希望用户在修改表单的任意一项之后，表单页面就需要变更为被修改状态。如果按照上例中watch的写法，那么我们就需要去监听表单每一个属性，太麻烦了，这时候就需要用到watch的深度监听deep

❞

代码如下:

 export default{
      data(){
          return{
              formData:{
                  username:"paodan",
                  password:"123456"
              },
              formStatus:"未修改状态"
          }
      },
      watch:{
          formData:{
           // 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等
              handler(newVal,oldVal){
                  this.formStatus = "修改状态"
              },
               // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
              deep:true
          }
      }
  }

3.watch监听对象的某个属性

data () {
      return {
          formData:{
                  username:"paodan",
                  password:"123456"
              },
      }
    },
    watch:{
      'formData.username':{
        handler:function(newV,oldV){
          console.log('watch中：',newV)
        },
         deep:true
      }
    }

4.利用computed配合watch实现单个属性的深度监听

data () {
      return {
          formData:{
                  username:"paodan",
                  password:"123456"
              },
      }
    },
    watch:{
     username(newV,oldV){
         console.log('newV',newV)
     }
    },
    computed:{
        username(){
            return this.formData.username
        }
    }

注: handler是规定的写法，其实就是watch的一个的属性(函数类型)

参考文章:
实战技巧，Vue原来还可以这样写
如何使用 Markdown Nice 浏览器插件

本文使用 mdnice 排版