使用 deep 观察 Vue 中的嵌套对象

Question

我正在尝试使用深度调用监视具有多个属性的数据对象，我需要知道在监视调用中触发了对象中的哪个属性更改。有没有办法知道处理程序中的属性。

data(){
   return {
        user:{
           first_name:'',
           last_name:'',
            }
    }
},
watch:{
    user:{
       deep:true,
       handler(value){
       //Here I want to know which property(first_name/last_name) change of the user object has triggered this.
        }
    }
}

Answer 1

vue 似乎没有办法确定哪些属性发生了变化。

使用您的示例在任何属性更改时触发监视回调。

但是vue还有一个选择：

// keypath
vm.$watch('a.b.c', function (newVal, oldVal) {
  // do something
})

https://vuejs.org/v2/api/#vm-watch

你的情况可能是这样的：

data(){
   return {
        user:{
           first_name:'',
           last_name:'',
            }
    }
},
watch:{
    "user.first_name": function(newVal, oldVal) {
      // todo
    },
    "user.last_name": function(newVal, oldVal) {
      // todo
    }
}

但我不确定这是不是好方法

更新来自 vue 文档

注意：当改变（而不是替换）对象或数组时， 旧值将与新值相同，因为它们引用 相同的对象/数组。 Vue 不保留预突变值的副本。

在这种情况下，手动比较对象是没有用的，因为 newVal = oldVal（一个引用）

upd2：重新创建一个对象可能会变通

// for example
user = Object.assign({}, user, { first_name: "newValOfFirstName" })

// instead of
user.first_name = "newValOfFirstName";

Answer 2

你可以这样做：

<template>
  <div>
    <div>
      <input type="text" v-model="obj.prop1" />
      <input type="text" v-model="obj.prop2" />
      <input type="text" v-model="obj.prop3" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    obj: {
      prop1: '',
      prop2: '',
      prop3: '',
    },
  }),
  mounted() {
    for (const key in this.obj) {
      this.$watch(
        () => this.obj[key],
        (newValue, oldValue) => {
          console.log(key, oldValue, newValue);
        }
      );
    }
  },
};
</script>

使用this.$watch 方法可以创建动态观察者。

更多详情可以查看文档：https://vuejs.org/v2/api/#watch