J'ai un reactive autour d'une map initialement vide : const map =reactive({});, et un const map =reactive({});，以及一个计算，它告诉如果地图有一个键“key”：const mapContainsKeyCompulated = Computed(() => map.hasOwnProperty("key"))compute

qui indique si la map a une clé "key" : const mapContainsKeyCompulated = Computed(() => map.hasOwnProperty("key")). Lorsque je change de carte, les calculs ne sont pas mis à jour.

Je suis resté bloqué sur ce problème pendant une journée et j'ai réussi à trouver un exemple minimal qui démontre le problème :

<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>

J'ai lu un tas de réponses stackoverflow et la documentation de Vue mais je n'arrive toujours pas à comprendre.

Pourquoi mapContainsKeyCompulated n'est-il pas mis à jour ?
• Si réactif Map：{{map}} ne « suit » pas l'ajout ou la suppression de clés sur la carte, pourquoi
(ligne 14) se met-il si bien à jour ?
Lorsque je remplace map{} par array[] et que "hasOwnProperty" par "includes()", cela fonctionne bien. Quelle est la différence?
Comment résoudre ce problème sans utiliser la vilaine solution « watch » (où « map.hasOwnProperty(key) » doit être répété) ?

EDIT : Comme @estus-flask l'a mentionné, il s'agit d'un bug de VueJS corrigé dans la version 3.2.46. 🎜

const map = reactive({ key: undefined })

const mapContainsKeyComputed = computed(() => map[key] !== undefined)

const mapContainsKeyComputed = computed(() => key in map)