반응 맵에서 Vue Compute()가 실행되지 않습니다.

Question

처음에 빈 맵 주위에 reactive가 있습니다: const map =reactive({});, 그리고 맵에 키 "key"가 있는지 알려주는 const map =reactive({});，以及一个计算，它告诉如果地图有一个键“key”：const mapContainsKeyCompulated = Computed(() => map.hasOwnProperty("key"))compute

: const mapContainsKeyCompulated = Computed(() => map.hasOwnProperty("key")). 지도를 변경하면 계산이 업데이트되지 않습니다.

저는 하루 동안 이 문제에 매달렸고 문제를 보여주는 최소한의 예를 생각해 냈습니다.

으아악

많은 stackoverflow 답변과 Vue 문서를 읽었지만 여전히 이해할 수 없습니다.

mapContainsKeyCompulated가 업데이트되지 않는 이유는 무엇입니까?
• 만약 reactive Map：{{map}}가 지도에 키 추가 또는 제거를 "추적"하지 않는다면 왜
(14행) 업데이트가 그렇게 잘 되나요?
map{}을 array[]로 바꾸고 "hasOwnProperty"를 "includes()"로 바꾸면 제대로 작동합니다. 차이점은 무엇입니까?
보기 흉한 "watch" 솔루션("map.hasOwnProperty(key)"을 반복해야 함)을 사용하지 않고 이 문제를 해결하는 방법은 무엇입니까?

EDIT: @estus-flask가 언급했듯이 이는 3.2.46에서 수정된 VueJS 버그입니다. 🎜

Answer 1

Vue 반응형에는 반응형 객체 메서드에 대한 명시적인 지원이 필요합니다. hasOwnProperty 是相当低级的，因此它已经有一段时间不受支持了。如果没有支持，map.hasOwnProperty(key) 会尝试访问非反应性原始对象上的key，并且不会触发反应性，因此第一个计算 调用不会设置可以在下一次 map 변화에 따라 실행되는 리스너.

이 문제를 해결하는 한 가지 방법은 Vue 2 및 3에서 반응형 작업을 수행하는 전통적인 방법인 key(다른 답변에서 제안됨)을 먼저 정의하는 것입니다.

으아아아

또 다른 방법은 반응 객체의 누락된 key 속성에 액세스하는 것입니다.

으아아아

또 다른 방법은 in 运算符。由于 Vue 3 使用 Proxy 进行响应，因此可以通过 has 트랩을 사용하여 속성에 액세스할 때를 감지하는 것입니다.

으아아아

hasOwnProperty에 대한 지원이 최근 3.2.46에 추가되었으므로 질문의 코드는 최신 Vue 버전에서 작동해야 합니다.

map 并不是真正的地图。如果使用 Map，这在任何 Vue 3 版本中都会有所不同，Vue 支持它，并且预计 map.has(key) 반응성을 유발합니다.