[vue] 가상돔

가상돔이란 실제 돔에서 처리하는 것이 아닌

가상의 돔을 만들어 메모리에서 미리 처리하고 실제 돔과 비교하여 처리&적용하는 것을 말함

 

실제 돔을 우리가 직접 다루게 된다면,

실제 브라우저에선

우리가 조작한 돔의 노드를 찾고,

조작한 대로 돔을 수정한 후에,

다시 부모와 자식 요소들을 페인팅해주어야 함.

 

"

 - 돔은 트리구조로 되어 있어 구조가 복잡해질수록 탐색비용이 늘어남

 - 화면의 돔이 수정될때마다 브라우저는 전체 돔 트리의 변경사항을 수정해야함 

"

 

허나, 가상돔을 사용한다면

실제 돔과 메모리에서 미리 처리된 가상의 돔을 비교하여 차이가 있는 돔만 리페인팅 해주어

실제 돔의 변경을 최소화 해줌

---

vue에서는 MVVM 패턴을 사용함

 

MVVM패턴에서는 돔에 직접접근 하지 않고,

모델(데이터 객체), 뷰(화면) 사이에 가상돔을 둔다.

 

vue에서는 가상돔을 둠으로써,

가상 돔이 수정될시, View와 비교하여 바뀐부분만 수정을 함. 돔에 직접접근 하는 것보다 효율적이다.

 

vue 공식문서에서는 아래와 같은 vnode를 기술함

위의 vnode는 div요소를 나타내는 일반 js객체이며 가상의 노드임

위 노드에 실제 돔 요소를 만드는데 필요한 모든 정보가 있으며

추가로 하위node들도 보유하고 있어 DOM 트리구조를 만들기에 충분함

 

이렇게 실제node를 가상의 vnode로 만든 후,

가상 돔을 구현.

렌더러는 가상 돔들을 비교해 차이점을 파악하고 변경 내용을 실제 dom에 적용함

 

돔에 바로바로 페인팅 하는게 아닌 가상의 vnode들을 비교해

필요한 것만 브라우저에 요청하여 효율적으로 브라우저에 페인트칠을 한다.

 

https://vuejs.org/guide/extras/rendering-mechanism.html#virtual-dom

Rendering Mechanism | Vue.js