Vue Reactivity(Array, Map.. etc) 반응 트리거가 안됨

https://jp.vuejs.org/v2/guide/reactivity.html

リアクティブの探求 — Vue.js

위에 문서를 보면 

 

Vue는 배열의 다음 변화는 감지 할 수 없습니다.

1. 인덱스와 함께 아이템을 직접 설정하는 경우, 예를 들어 vm.items[indexOfItem] = newValue
2. 배열의 길이를 변경하는 경우, 예를 들어 vm.items.length = newLength

와 같이 Array이나 Map 깊은반응과 관련되는 친구들을 사용할 땐 조심해야한다.

 

이렇게 되면 억지로 반응성이 트리거 되게 set함수를 따로 선언해서 걸어두거나 Vue.set을 이용하는 방법을 선택해야하는데,

Map같은 경우는 그냥 Object형식으로 하면 this.$set 과 this.$delete를 쉽게 이용할 수 있으므로 더 편한것? 같다.

물론 기본  Map의 API(has, set, get)를 이용하는게 안되서 불편할 수 있는데 object 전용 API로도 충분히 가능하다고 본다.

 

// typescript 대응
private items: { [key: number]: boolean } = {}

// this.$set(타겟, 넣을키, 넣을값)
this.$set(this.items, id, true)

// this.$delete(타겟, 삭제할 키)
this.$delete(this.items, id)

 

이런 귀찮은 짓거리도 Composition API를 쓰게되면 reactive라는 깊은 반응형도 트리거해주는 친구가 있다고 한다.

https://stackoverflow.com/questions/37130105/does-vue-support-reactivity-on-map-and-set-data-types

Does Vue support reactivity on Map and Set data types?