Saya mempunyai reaktif di sekeliling peta yang pada mulanya kosong: const map =reactive({});, dan const map =reactive({});，以及一个计算，它告诉如果地图有一个键“key”：const mapContainsKeyCompulated = Computed(() => map.hasOwnProperty("key"))compute

yang memberitahu jika peta mempunyai kunci "kunci": const mapContainsKeyCompulated = Dikira(() => map.hasOwnProperty("kunci")). Apabila saya menukar peta, pengiraan tidak dikemas kini.

Saya terperangkap dalam masalah ini selama sehari dan berjaya menghasilkan contoh minimum yang menunjukkan masalah:

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

Saya telah membaca sekumpulan jawapan stackoverflow dan dokumentasi Vue tetapi saya masih tidak dapat memahaminya.

Mengapa mapContainsKeyCompulated tidak dikemas kini?
• Jika reaktif Map：{{map}} tidak "menjejaki" kekunci ditambah atau dialih keluar pada peta, kenapa
(baris 14) mengemas kini dengan baik?
Apabila saya menggantikan peta{} dengan tatasusunan[] dan menggantikan "hasOwnProperty" dengan "termasuk()", ia berfungsi dengan baik. Apakah perbezaannya?
Bagaimana untuk menyelesaikan masalah ini tanpa menggunakan penyelesaian "jam tangan" yang jelek (di mana "map.hasOwnProperty(key)" mesti diulang)?

EDIT: Seperti yang dinyatakan oleh @estus-flask, ini ialah pepijat VueJS yang telah diperbaiki dalam 3.2.46. 🎜

const map = reactive({ key: undefined })

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

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