Vue Compute() tidak menyala pada peta reaktif

Question

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

Answer 1

Kereaktifan Vue memerlukan sokongan eksplisit untuk kaedah objek reaktif. hasOwnProperty 是相当低级的，因此它已经有一段时间不受支持了。如果没有支持，map.hasOwnProperty(key) 会尝试访问非反应性原始对象上的key，并且不会触发反应性，因此第一个计算< /code> 调用不会设置可以在下一次 map Pendengar 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 key harta yang hilang pada objek reaktif:

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

Cara lain ialah menggunakan in 运算符。由于 Vue 3 使用 Proxy 进行响应，因此可以通过 has perangkap untuk mengesan apabila sesuatu harta diakses:

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

Sokongan untuk hasOwnProperty telah 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.