为什么在 vue 3 watch 上不调用对象突变？

Question

你能解释一下为什么当我在 Vue 3 中改变对象时 watch 没有被调用吗？ 相反，我需要完全替换对象。

https://codesandbox.io/s/nostalgic-glade-zer8v?file=/src/components/HelloWorld.vue

  methods: {
    change() {
      // Triggers watch
      this.user = { ...this.user, name: "hello" };
      // Doesn't triger watch
      this.user.name = "hello";
    },
  },

  watch: {
    user(nextUser) {
      console.log(nextUser);
    },
  },

Answer 1

来自watch docs：

To also detect nested value changes inside Objects, you need to pass in deep: true in the options argument

使用具有handler方法的watch object syntax，并使用deep 属性:

watch: {
  user: {                        // Watch object syntax
    handler(nextUser) {          // method must be called `handler`
      console.log(nextUser);
    },
    deep: true                   // deep watch for nested property changes
  },
}