Vue对某个对象的属性进行watch监听

普通的watch

data() {
  return {
    balance: 0
  }
},
watch: {
  balance (newValue, oldValue) {
    console.log(newValue)
  }
}

对象属性的watch

data() {
  return {
    user: {
      name: 'Joe.Ye',
      homepage: 'http://www.appblog.cn'
    }
  }
},
watch: {
  user: {
    handler(newValue, oldValue) {
      console.log(newValue)
    },
    deep: true
  }
}

只要user中的属性发生变化（可被监测到的），便会执行handler函数

对象某个具体属性的watch

如果想监测具体的属性变化，如homepage变化时，才执行handler函数，则可以利用计算属性computed做中间层。

data() {
  return {
    user: {
      name: 'Joe.Ye',
      homepage: 'http://www.appblog.cn'
    }
  }
},
computed: {
  homepage() {
    return this.user.homepage
  }
},
watch: {
  homepage (newValue, oldValue) {
    console.log(newValue)
  }
}