📌 Vue의 배열 변경 감지

JavaScript에서 우리는 아래의 메소드를 통해 원본 배열을 직접 변경할 수 있다.

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

위 메소드에 비해 원본 배열은 변경하지 않지만 새로운 배열을 변경후 반환하는 메소드들이 있다.

• filter()
• map()
• slice()
• concat()

새로운 배열을 변경후 반환하는 메소드를 사용하는 예를 보자.

el.items = el.items(filter(item => item.msg.match(/Foo/));

filter 메소드를 사용하여 'Foo'와 매칭되는 문자열만 새로운 배열로 반환하여 el.items에 넣어준다.

그렇다면 기존에 el.items에 있던 배열 데이터를 연결한 DOM을 버리고 새로 반환 받은 배열로 다시 렌더링 할 것이라고 생각할 수 있다.

하지만 Vue는 DOM 요소 재사용을 최적화하기 위해 기존에 사용하던 배열 데이터에서 변경된 배열 데이터의 차이점에 해당하는 내용만 다시 화면에 출력하는 방식을 사용하고 있다(Smart Heuristics).

어떻게 보면 리액트가 가상 돔을 사용해 기존 돔과 비교하여 다른 부분만 렌더링 해주는 것과 비슷한 내용이라고 볼 수 있을까? 라는 의문이 든다.