vue 监听对象的属性

本文举几个 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。(官网中的提示)