javascript - Vue deep watch 无法处理对象属性更改

Question

我有一个 customer对象作为我的初始数据。我有文本字段，当有人开始输入时，它会向对象添加不同的键。当一个新的key添加后，观察程序会正确触发，但如果键是从现有值编辑的，则不会。
因此，如果我输入街道地址，key street_address1已添加到 customer对象，所以观察者开火。如果我开始编辑街道地址，它就不会再触发了。
模板

<v-container>
  <v-col cols="12">
    <h2>Contact</h2>
    <div>Email Adderss</div>
    <v-text-field
      outlined
      v-model="customer.email"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <v-row>
      <v-col cols="6">
        <div>First</div>
        <v-text-field
          outlined
          v-model="customer.first"
          >
        </v-text-field>
      </v-col>
      <v-col cols="6">
        <div>Lasts</div>
        <v-text-field
          outlined
          v-model="customer.last"
          >
        </v-text-field>
      </v-col>
    </v-row>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 1</div>
    <v-text-field
      outlined
      v-model="customer.street_1"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 2</div>
    <v-text-field
      outlined
      v-model="customer.street_2"
      >
    </v-text-field>
  </v-col>
</v-container>

脚本

data() {
  return {
    customer: {}
  };
},
watch: {
  customer(newData) {
    console.log("test", newData)
  },
  deep: true
},

Answer 1

这是一个语法问题。 deep属性(property)未注册，因为它错误地位于 watch 外部，就好像它是第二 block watch 一样。
对 customer 使用对象语法 watch 。该对象应具有两个属性:

一个 handler方法(必须命名为“处理程序”，如 watch docs )

deep房产

watch: {
  customer: {
    handler (newData) {
      console.log("test", newData)
    },
    deep: true
  }
}

它也可以有 immediate: true属性，如果你想要 watch在组件首次创建时运行。