Vue Compute() ne se déclenche pas sur la carte réactive

Question

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

Answer 1

La réactivité de Vue nécessite une prise en charge explicite des méthodes d'objet réactives. hasOwnProperty 是相当低级的，因此它已经有一段时间不受支持了。如果没有支持，map.hasOwnProperty(key) 会尝试访问非反应性原始对象上的key，并且不会触发反应性，因此第一个计算< /code> 调用不会设置可以在下一次 map Auditeur qui se déclenche lorsqu'il est modifié.

Une façon de résoudre ce problème consiste d'abord à définir key (comme suggéré dans une autre réponse), qui est la manière traditionnelle de faire fonctionner la réactivité dans Vue 2 et 3 :

const map = reactive({ key: undefined })

Une autre façon est d'accéder à la propriété key manquante sur l'objet réactif :

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

Une autre façon consiste à utiliser in 运算符。由于 Vue 3 使用 Proxy 进行响应，因此可以通过 has un piège pour détecter l'accès à une propriété :

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

La prise en charge de hasOwnProperty a été récemment ajoutée dans la version 3.2.46, le code dans la question devrait donc fonctionner dans la dernière version de Vue.

map 并不是真正的地图。如果使用 Map，这在任何 Vue 3 版本中都会有所不同，Vue 支持它，并且预计 map.has(key) déclenchera la réactivité.