본문 바로가기

Web Programming/JavaScript & TypeScript

Vue.js의 객체 감시는 만악의 근원

Vue.js에서 배열이나 오브젝트의  v-for은 정말 짜증나는 관계가 아닐 수가 없습니다.


Vue.js 2를 기준으로, 배열이나 오브젝트는 감시가 불가능합니다.

그리고 이는 매우 더러운 코드를 양산하게 되는 이유가 됩니다.


배열이나 오브젝트의 감시를 위해서는 Vue.set(vm.$set) 또는 array.splice를 반드시 써야합니다.

안 쓰면 감시가 안됩니다.


한마디로, v-for을 사용할 때, v-for의 데이터를 바꾸는 일이 생긴다면, 반드시 주의해야할 부분입니다.


단순히 this.oldValue = newValue;로는 절대로 리 랜더링이 되지 않습니다.


다행이도 Vue.js 3.0에는 객체 감시 시스템을 바꿔서 된다고는 하니, Vue.js 3.0을 기다리는 수 밖에 없습니다.

반응형