vuejs中的watch/对象与数组失效

问题：deep watch 不生效。
代码：

vue3中传统的watch方式观察 patient对象的变化

  Form代码省略
...
  watch: {
    patient: {
      handler: function (nv, ov) {
        doSomeThing()
      },
      deep: true,
    },
  },
  async created() { // 服务器 端还原表单
     this.fetchPatientDetail(patientId);
  },
  setup() {
    const patient = ref({});
    return {
      patient
    };
  }

排查：
发现vuex中，patient对象变成的空数组。


image.png

神奇的是可以提交，但watch无效。


image.png

修改：
将 vuex 中的数组修改为对象，貌似可以正常工作了

image.png

patient对象在表单还原时，由于php的原因，空对象就直接输入[]，导致js的这个现象。后端同学返回加了一个对象转换，可以解决。

更深层次的原因后边挖掘，这里记录一下问题吧。 各种尝试修改，花了1个多小时...

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容