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
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. Map：{{map}} tidak "menjejaki" kekunci ditambah atau dialih keluar pada peta, kenapa EDIT: Seperti yang dinyatakan oleh @estus-flask, ini ialah pepijat VueJS yang telah diperbaiki dalam 3.2.46. 🎜
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Kereaktifan Vue memerlukan sokongan eksplisit untuk kaedah objek reaktif.
hasOwnProperty是相当低级的，因此它已经有一段时间不受支持了。如果没有支持，map.hasOwnProperty(key)会尝试访问非反应性原始对象上的key，并且不会触发反应性，因此第一个计算 调用不会设置可以在下一次mapPendengar yang menyala apabila ditukar.Salah satu cara untuk menyelesaikan masalah ini ialah dengan mentakrifkan dahulu
key(seperti yang dicadangkan dalam jawapan lain), iaitu cara tradisional untuk menjadikan kereaktifan berfungsi dalam Vue 2 dan 3:const map = reactive({ key: undefined })Cara lain ialah mengakses
keyharta yang hilang pada objek reaktif:Cara lain ialah menggunakan
in运算符。由于 Vue 3 使用Proxy进行响应，因此可以通过hasperangkap untuk mengesan apabila sesuatu harta diakses:Sokongan untuk
hasOwnPropertytelah ditambahkan baru-baru ini dalam 3.2.46, jadi kod dalam soalan harus berfungsi dalam versi Vue terkini.map并不是真正的地图。如果使用Map，这在任何 Vue 3 版本中都会有所不同，Vue 支持它，并且预计map.has(key)akan mencetuskan kereaktifan.