使用Object.values()时Vue计算属性无法更新的原因解析

问题背景 #

在Vue组件中使用urql执行多个GraphQL查询时，将查询结果存入普通对象gql，尝试通过遍历对象的方式计算全局loading状态，但该计算属性不会随查询状态更新；而显式逐个判断查询的fetching属性却能正常工作。

相关代码：

// 查询结果存入普通对象
const gql = {
  queryA: doQueryA(),
  queryB: doQueryB(),
  queryC: doQueryC()
};

// 不生效的遍历写法
const loading = computed(() => Object.values(gql).some(query => query.fetching));

// 生效的显式写法
const loading = computed(() =>
  gql.queryA.fetching ||
  gql.queryB.fetching ||
  gql.queryC.fetching
);

核心原因 #

问题出在Vue的响应式依赖追踪机制和gql对象的类型上：

• gql是普通JavaScript对象，未被Vue的reactive/ref包裹。当用Object.values(gql)遍历它时，Vue只会记录「访问了gql对象的属性」这个依赖，但gql的属性（指向查询结果的引用）从未改变，所以Vue认为计算属性的依赖没有更新，不会重新计算。
• 显式访问gql.queryA.fetching时，直接触发了urql返回的响应式查询对象的fetching属性getter，Vue会将该fetching属性单独标记为计算属性的依赖。当fetching状态变化时，Vue能立即感知并触发计算属性重新执行。

简言之：遍历普通对象的过程中，Vue无法关联到内部响应式对象的属性依赖；显式访问则直接建立了正确的依赖关系。

解决方法 #

方法1：将gql转为响应式对象 #

用reactive包裹gql，让Vue能追踪到内部响应式对象的关联变化：

import { reactive } from 'vue';

const gql = reactive({
  queryA: doQueryA(),
  queryB: doQueryB(),
  queryC: doQueryC()
});

// 现在遍历写法可以正常生效
const loading = computed(() => Object.values(gql).some(query => query.fetching));

方法2：保留显式判断逻辑 #

如果不想修改gql的定义，继续使用显式逐个判断的方式即可，这种写法能确保每个fetching属性的依赖都被正确收集。

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