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

Question

저는 학생이고 React, Vue 등과 같은 다른 유명한 프레임워크처럼 대학 프로젝트를 위한 가상 DOM을 만들려고 합니다(소품이나 이벤트와 같은 고급 기능은 없으므로 간단하게 유지하겠습니다). . 여러 코드 파일(코드 분할)이 있는 경우를 알고 싶습니다. 깊은 하위 요소를 변경하는 경우 전체 가상 DOM(모든 하위 요소 및 상위 요소 포함)을 비교해야 합니까, 아니면 해당 하위 요소만 비교해야 합니까? 완전한 새 가상 DOM(모든 하위 항목 포함)을 이전 가상 DOM과 비교해야 하는 경우. 그래서

P粉420868294 · Answer

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

vue3의 접근 방식은

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

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

참조: