React 또는 Vue에서 가상 DOM의 내부 작동 이해

Question

저는 학생이고 다른 유명한 프레임워크인 React, Vue 등과 같이 대학 프로젝트를 위해 나만의 가상 DOM을 만들려고 합니다(소품이나 이벤트와 같은 고급 기능이 없으므로 간단하게 유지하겠습니다). . 같은.

여러 코드 파일(코드 분할)이 있는 경우를 알고 싶습니다. 깊은 하위 요소를 변경하는 경우 전체 가상 DOM(모든 하위 요소 및 상위 요소 포함)을 비교해야 합니까, 아니면 해당 하위 요소만 비교해야 합니까?

완전한 새 가상 DOM(모든 하위 항목 포함)을 이전 가상 DOM과 비교해야 하는 경우. 그렇다면 React 또는 Vue에서 다시 렌더링하는 데 왜 관심을 가져야 합니까(하위 항목을 변경하면 프레임워크가 전체 Virtual DOM을 비교하게 되므로)

Answer 1

Vue의 경우, Virtual DOM은 vue2와 vue3에서 다르게 작동합니다.

vue3의 접근 방식은

1. 구성 요소 파일의 HTML 템플릿이나 렌더링 기능을 구문 분석하고 이를 가상 노드 표현으로 변환합니다.
2. 파싱하는 동안 동적 데이터에 종속된 노드를 기록합니다.
3. 아래와 같이

4. 효과는 특정 데이터 값을 구문 분석하는 데 필요한 계산을 정의하는 함수입니다.
5. 이 효과에는 가상 노드의 렌더링 기능도 포함됩니다
6. 렌더링 기능은 가상 노드를 DOM 요소로 교묘하게 변환합니다
7. 이제 data1이 변경될 때마다 Vue3은 해당 효과를 다시 실행하고 후속 데이터 변경에 대한 업데이트를 트리거합니다.

참조:

1. Vue3 리액티브
2. Vnode 변환< /里>