本文举几个 wacth 的例子

  • 普通情况 -- 监听 ''单个值''
  • 监听对象
  • 监听对象中的某个属性
  • 监听对象中的所有属性(即对象中属性发生变化时,触发该对象的监听)

常见实例

  • 表单监听实例:监听一个表单中的所有属性都不为空(即对象中属性发生变化时,触发该对象的监听)

 

  • 监听 ''单个值''
data() {
    return {
        text: '' // 该值可以是字符串、数字、布尔、数组等   
    }
},
watch: {
    text(newValue, oldValue) { // 其中 newValue 是监听改变后的值,oldValue 是改变之前的值
        console.log(newValue) // 可以在此处执行对应的语句或函数
    }
}
  •    监听对象

          这样监听只是对象,对于对象的监听,默认情况下其实是监听该对象的引用,比如在此处对 obj 重新赋值,才会被监听到,才能调用 handler 函数

watch: {
  obj: {
    handler(newValue, oldValue) {
      console.log(newValue)
    }
  }
},
mounted: {
    this.obj = {
        name: '456',
        age: '456'
    }

}
  • 监听对象中的某个属性

如果想对对象中的某个属性进行监听,deep 属性就派上用场了

deep 的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

watch: {
  obj: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
       deep: true 
  }
}

幸运的是,我们可以使用字符串形式监听,这样Vue.js才会一层一层解析下去,直到遇到属性a,然后才给a设置监听函数。

watch: {
  'obj.a': {
    handler(newValue, oldValue) {
      console.log(newValue)
    }
  }
}

或者也可以使用计算属性 computed 作为中间层,如下

computed: {
  age() {
    return this.obj.age
  }
},
watch: {
  age(newValue, oldValue) {
    console.log(newValue)
  }
}
  • 监听对象中的所有属性(即对象中任何一个属性发生变化时,便会触发该对象的监听)
computed: {
  obj() {
       let {name, age} = this
    return {name, age}
  }
},
watch: {
  obj(newValue, oldValue) {
    console.log(newValue)
  }
}
  • 表单监听实例:监听一个表单中的所有属性都不为空(即对象中任何一个属性发生变化时,便会触发该对象的监听,利用深度监听)
 watch: {
    obj: {
      handler (newValue, oldValue) {
        if (obj.a && obj.e && obj.d && obj.y && obj.w) {
          // 当表单中的所有值都不为空的时候执行的函数
        } else {
          // 当表单中的有值为空的时候执行的函数
        }
      },
      deep: true
    }
  }

注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。(官网中的提示)

Logo

前往低代码交流专区

更多推荐