JS에서 배열값을 바꿔도 재랜더링 되지 않는 이유

민지킴·2021년 7월 13일
0

JS값이 바뀌어도 재랜더링이 되지 않는 이유

vue의 값의 변화는 "객체의 변화"를 감지한다. 즉 객체 자체가 바뀌는건 감지한다. 그러나 객체의 속성, 배열의 값이 바뀌는건 감지하지 못한다.

이를 해결하는 방법은 배열의 경우 배열 내부의 함수들을 사용하는 것이다.

ex)splice, slice, push 등...

Object의 경우 이러한 함수들이 없다. 그래서 this.$set 메소드를 이용해줘야한다.

this.$set(<변수 명>,<변수 타입>,<값>)

ex) this.$set(person1, 'name', 'Jhone')

이렇게 배열의 메소드들이나 this.$set을 사용하면 vue는 이의 변화를 알아보고 재랜더링하게 된다.

또는 그래서 다시 렌더링이 되려면 vue에서 몇가지 함수들을 변화를 감지할 수 있도록 래핑해두었는데 그중에서 splice를 사용해야 한다.

ex) this.arr.splice(3,1,false)

profile
하루하루는 성실하게 인생 전체는 되는대로

0개의 댓글