vue watch中deep和immediate的用法

Posted 2023-04-01

参考技术A 当值第一次绑定时watch不会执行监听函数，当值改变时才会执行，如果想要最初绑定知识也执行需要设置immediate属性为true。immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

监听对象属性值发生变化是需要设置deep为true，deep表示深度监听。数组不需要深度监听；在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域。

vue2.0 watch里面的 deep和immediate作用

deep，默认值是 false，代表是否深度监听。
immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

computed: {
  btnObj() {
    const { sign_img, check } = this
    return {
      sign_img,
      check
    }
  }
},
watch: {
  btnObj: {
    handler: function(newVal,oldVal) {
      if(!!this.sign_img && this.check){
        this.submit_flag = true
        this.sign_flag = ‘1‘
      }else{
        this.submit_flag = false
        this.sign_flag = ‘0‘
      }
    },
    deep: true,
    immediate: true
  }
}