Vue如何使用watch对对象内某个属性进行监听

普通对象上的watch：

data() {
  return {
    person: {
      id: 1,
      name: 'zs'
    }
  }
},
watch: {
      person(newVal, oldVal) {
        console.log('更新前的person:' + oldVal + ',' + '更新后的person:' + newVal);
    }
}

这样引用的话当对象身上的某项属性例如id对应的属性值改变时是不会触发watch的。

如果要使对象身上任意一个属性发生变化时触发watch,代码应修改为如下:

data() {
  return {
    person: {
      id: 1,
      name: 'zs'
    }
  }
},
watch: {
  person: {
    handler(newVal, oldVal) {
      console.log('更新前的person:' + oldVal + ',' + '更新后的person:' + newVal);
    },
    deep: true
  }
}

如果要使对象身上某一个具体的属性如person中的name变化时触发watch,代码应修改为如下:

data() {
  return {
    person: {
      id: 1,
      name: 'zs'
    }
  }
},
watch: {
  'person.name'(newVal, oldVal) {
      console.log('更新前的name:' + oldVal + ',' + '更新后的name:' + newVal);
  }
}