Vue3 Options API中Watcher无法检测对象数组变更的排查与解决

算力阿峰

2026-6-24

问题原因分析

watch监听目标错误：你给$watch传递的是this.refStoreTest.getters.get函数本身，而非该函数返回的响应式数组。Vue的$watch若监听函数类型参数，需是返回要监听值的getter函数，否则它只会监听函数引用的变化（数组内容改变不会影响函数引用），自然无法触发回调。
（次要）可能存在组件内未正确引用StoreTest的情况：若this.refStoreTest未正确指向导出的StoreTest对象，watch也无法追踪目标数组的变化。

解决方案

修正watch的监听目标
将watch的第一个参数改为返回数组的箭头函数，确保Vue能追踪到数组的响应式变化：

created() {
  console.log(verboseTag, 'created()');
  this.$watch(
    () => this.refStoreTest.getters.get(), // 用函数返回要监听的数组
    (newVal, oldVal) => {
      const msg = JSON.stringify({
        msg: verboseTag + '@watch refStoreTest.getters.get()',
        newVal: newVal,
        oldVal: oldVal
      });
      console.log(msg);
      // 避免原地修改原数组，先复制再排序
      const sortedArray = [...newVal].sort((a, b) => a.order - b.order);
      this.refStoreRecentlyHoveredGeometriesProps.setters.set(sortedArray);
    }
  );
}

确保组件正确引用StoreTest
在组件脚本中正确导入并关联StoreTest：

import { StoreTest } from './storeTest.vue'; // 替换为实际文件路径

export default {
  data() {
    return {
      refStoreTest: StoreTest,
      // 其他数据定义...
    }
  },
  // 其他组件选项...
}