Vue Watch没有触发

Question

尝试使用vue watch方法,但它似乎没有触发某些对象,即使使用deep:true.

在我的组件中,我收到一个数组作为prop,它是创建以下表单的字段.我可以构建表单并动态地将它们绑定到一个被调用的对象crudModelCreate,一切正常(我在vue dev工具中看到,甚至提交表单根据计划工作)

但是我在尝试观察动态对象的变化时遇到了问题.

  <md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>

   ...

   data() {
      return {
         state: 1, // This gets changed somewhere in the middle and changes fine
         crudModelCreate: {},
      }
   },
   ...
   watch: {
        'state': {
            handler: function(val, oldVal) {
                this.$emit("changedState", this.state);
                // this works fine
            },
        },
        'crudModelCreate': {
            handler: function(val, oldVal) {
                console.log("beep1")
                this.$emit("updatedCreate", this.crudModelCreate);
                // This doesn't work
            },
            deep: true,
            immediate: true
        },
    }

Answer 1

来自文档

由于现代JavaScript的限制(以及放弃Object.observe),Vue无法检测属性添加或删除.由于Vue在实例初始化期间执行getter/setter转换过程,因此数据对象中必须存在一个属性,以便Vue转换它并使其具有反应性.

请深入了解Resetivity in Depth https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats