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

Posted 2023-02-23

【中文标题】为啥在 vue 3 watch 上不调用对象突变？

【英文标题】：Why on vue 3 watch is not called on object mutation?为什么在 vue 3 watch 上不调用对象突变？

【发布时间】：2021-05-30 09:18:37

【问题描述】：

你能解释一下为什么当我在 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);
    ,
  ,

【参考方案1】：

来自watch docs：

要同时检测对象内部的嵌套值变化，您需要在选项参数中传入deep: true

使用具有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
  ,