개념:
Virtual DOM은 실제로 DOM 노드를 설명하기 위해 기본 JS 개체를 사용하며 실제로는 실제 DOM을 추상화한 것일 뿐입니다. 마지막으로, 이 트리는 일련의 작업을 통해 실제 환경에 매핑될 수 있습니다.
이는 js와 DOM 사이에 캐시를 만드는 것과 같습니다. 패치(diff 알고리즘)를 사용하여 새 가상 DOM 레코드와 기존 가상 DOM 레코드를 객체와 비교하고 요청 시 업데이트하고 최종적으로 실제 DOM을 생성합니다.
가상 돔 원칙 프로세스:
템플릿 ==> 렌더링 기능 ==> 가상 DOM 트리 ==> 실제 DOM
Vuejs는 컴파일을 통해 템플릿(template)을 렌더링 함수(render)로 변환하고, 렌더링 함수를 실행하면 가상 노드 트리를 얻을 수 있습니다.
Model에서 작업할 때 해당 Dep에서 Watcher 개체를 트리거합니다. Watcher 개체는 해당 업데이트를 호출하여 보기를 수정합니다.
가상 DOM의 실현 원리는 주로 다음 세 부분으로 구성됩니다.
JavaScript 객체를 사용하여 실제 DOM 트리를 시뮬레이션하고 실제 DOM을 추상화합니다.
diff 알고리즘 — 두 가상 DOM 트리 간의 차이점을 비교합니다.
pach 알고리즘 — 두 개의 가상 DOM 개체의 차이를 실제 DOM 트리에 적용합니다.