[트러블슈팅] Vue2: 객체 수정 시 반응형이 묵묵무답

vue2로 작업을 하고 있는데(vue3 마이그레이션 작업이 멀지 않았다...!!!), 항상 경시하는 것 중 하나가 배열과 객체에 대한 반응형이다. 분명 데이터를 삽입제거하여 수정했는데 화면에 반영안되어 혼자 끙끙대다가 어느순간 또 이 사실을 잊고 있는 경우가 많은 것 보니 한 번 쯤 이와 관련하여 기록해놔야겠다 생각이 들어 vue 문서를 참고하여 글을 써본다.

 

Vue2가 변경 내용을 추적하는 방법

vue 인스턴스에 JS객체를 data 옵션으로 전달하게 되면 vue는 Object.defineProperty를 사용하여 getter/setters로 변환한다. 모든 컴포넌트 인스턴스에는 watcher 인스턴스가 있으며 이는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록한다. 나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링된다.

 

배열과 객체의 반응형 한계

1. 배열의 한계
- 인덱스로 배열에 있는 항목을 직접 설정하는 경우
-  배열 길이를 수정하는 경우

2. 객체의 한계
- 속성 추가 및 삭제: 만약 속성의 추가제거 감지를 원한다면 Vue.set(object, key, value)를 통해서 진행하며 된다

 

 

 

---

참고 문서

• https://v2.ko.vuejs.org/v2/guide/reactivity.html
  
• https://v2.ko.vuejs.org/v2/guide/list.html#nav