Vue中reactive对象新增属性时computed未触发更新的问题

问题背景 #

使用reactive包裹空对象后，通过computed调用hasOwnProperty判断键是否存在，新增键时computed未更新，但模板渲染对象和watch能正常响应。

最小复现代码 #

<script setup>
import {computed, reactive, ref, watch} from "vue";

const map = reactive({});
const key = "key";

const mapContainsKeyComputed = computed(() => map.hasOwnProperty(key))

const mapContainsKeyWatched = ref(map.hasOwnProperty(key));
watch(map, () => mapContainsKeyWatched.value = map.hasOwnProperty(key))
</script>

<template>
  Map: {{map}}
  <br/>
  Computed: does map contain "key"? {{mapContainsKeyComputed}}
  <br/>
  Watch: does map contain key? {{mapContainsKeyWatched}}
  <br/>
  <button @click="map[key] = 'value'">add key-value</button>
</template>

疑问解答 #

1. 为什么mapContainsKeyComputed不会更新？
   Vue 3.2.46版本之前的响应式系统，对hasOwnProperty这类对象原型方法的调用未做依赖收集处理。Vue的响应式追踪基于属性访问触发，而hasOwnProperty属于Object.prototype的方法，调用时并未直接访问对象的key属性，导致computed无法感知对象新增键的变化。

2. 若reactive无法追踪键的增删，为何模板中Map: {{map}}能正常更新？
   模板渲染整个对象时，Vue会触发对象的整体依赖追踪。当对象新增/删除键时，这个整体依赖会被触发更新，所以模板能实时显示最新的对象内容。而computed里的hasOwnProperty调用没有触发属性级别的依赖收集，因此不会更新。

3. 替换为数组并使用includes()时功能正常，二者有何区别？
   Vue对数组的响应式处理做了特殊优化：拦截了数组的内置方法（如includes、push等），同时会追踪数组索引的访问。调用includes时，内部会遍历数组元素，触发对应索引的属性访问，完成依赖收集。而对象的hasOwnProperty未被Vue拦截，无法触发属性访问的追踪逻辑。

4. 如何避免watch这种重复代码的繁琐方案？

• 优先升级Vue版本：此问题是Vue的已知bug，已在3.2.46版本修复，升级后直接使用hasOwnProperty即可正常触发computed更新。
• 替代判断方式：若无法升级，可改用Object.keys(map).includes(key)，Object.keys会遍历对象的所有可枚举属性，触发属性访问的依赖收集；或者直接判断属性是否存在（map[key] !== undefined，注意需排除属性值本身就是undefined的场景）。
• 使用ref包裹对象：用ref代替reactive，修改对象时通过重新赋值触发响应，比如map.value = {...map.value, [key]: 'value'}。

补充说明 #

此问题为VueJS的已知bug，已在3.2.46版本修复，该版本更新日志中修复了对象原型方法调用时的响应式追踪失效问题。

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