Vue3通过Watcher更新reactive对象不生效问题排查

reactive() 创建的响应式对象不支持直接替换整个变量的引用。
你初始声明 let matchedFile = reactive({}) 时，变量指向Vue生成的空响应式Proxy实例，后续执行 matchedFile = val 本质是修改了这个JS变量的指针，让它指向了新的val对象，但Vue组件、DevTools绑定的始终是最开始创建的那个空Proxy实例的引用，两者已经断联。所以你console打印新赋值的变量能看到正确值，但实际绑定的响应式对象从来没被修改过，DevTools里自然一直显示空对象，后续对这个变量的修改也不会触发视图更新。

你可以根据场景选下面任意一种方案：

• 方案1：保留reactive写法，不替换整个对象，通过属性合并的方式更新原响应式实例

function updateMatchedF(val) {
  // 先清空旧属性（如果不需要保留历史值可以加这步）
  Object.keys(matchedFile).forEach(key => delete matchedFile[key])
  // 把新对象的属性合并到原响应式对象上，不改变原引用
  Object.assign(matchedFile, val)
}

这种写法全程操作的是初始创建的响应式代理，不会断联，DevTools和视图都能正常响应更新。

• 方案2：把reactive换成ref，ref原生支持整体替换对象值
  首先修改初始声明，用const（不需要改变变量本身的引用，只修改.value属性）：

const matchedFile = ref({});

再修改赋值逻辑，操作ref的.value属性：

function updateMatchedF(val) {
  matchedFile.value = val;
}

提示：ref接收对象类型值时会自动用reactive做深层响应式转换，整体替换.value是官方支持的标准用法，不存在断联问题。

额外优化提示：你当前watch的回调加了async但内部没有任何await异步逻辑，这个async关键字是多余的，可以直接删掉。如果你的业务逻辑不需要对store里的activeFile做额外的本地改造，其实完全不需要额外声明响应式变量、加computed和watch中转，直接使用store.activeFile即可。

内容的提问来源于stack exchange，提问作者seanberlin