반응과 Vue 가상 돔의 차이점은 무엇입니까?

react의 가상 DOM과 vue 사이에는 차이가 없습니다. React와 vue의 가상 DOM은 모두 js 객체를 사용하여 실제 DOM을 시뮬레이션하고 가상 DOM의 diff를 사용하여 실제 DOM의 업데이트를 최소화합니다. 파티클별로 Degree를 여러 유형으로 나누어 동일한 레벨의 DOM 노드를 비교하고 추가, 삭제, 이동 작업을 수행하므로 불필요한 성능 손실을 줄일 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React와 Vue의 가상 돔의 차이점은 무엇인가요?

차이가 없습니다.

react와 vue의 가상 DOM은 동일합니다. 둘 다 JS 객체를 사용하여 실제 DOM을 시뮬레이션한 다음 가상 DOM의 diff를 사용하여 실제 DOM의 업데이트를 최소화합니다.

몇 가지 구현을 제외하면 둘 중 전반부(JS 객체를 사용하여 실제 DOM을 시뮬레이션하는 방식)는 거의 동일합니다.

하반기(실제 DOM의 업데이트를 최소화하기 위해 virtual DOM diff 사용)에서는 교체, 삭제, 삽입 등 두 알고리즘이 유사합니다.

vue와 React 모두 가상 DOM 알고리즘을 사용하여 실제 DOM 업데이트를 최소화하여 불필요한 성능 손실을 줄입니다.

세분성에 따라 트리 diff, 구성 요소 diff, 요소 diff로 구분됩니다. 트리 diff는 동일한 수준의 DOM 노드를 비교하고 추가, 삭제 및 이동 작업을 수행합니다. 구성 요소가 발견되면 트리 비교 프로세스가 다시 시작됩니다.

DOM의 두 가지 업데이트 전략은 다르지만 React는 하향식 전체 비교를 사용하고 Vue는 부분 구독 모델을 사용합니다. 그러나 이것은 실제로 가상 DOM과 관련이 없습니다. dom의 업데이트 전략은 다릅니다. React는 위에서 아래로 완전히 다릅니다. Vue는 각 구성 요소의 종속성을 추적하며 전체 구성 요소 트리를 다시 렌더링할 필요가 없습니다.

1. 이에 반응하여 상태가 변경되면 구성 요소 트리가 위에서 아래로 완전히 다르고 페이지를 다시 렌더링하고 새 가상 DOM 트리를 재생성하고 이전 DOM 트리와 새 DOM 트리를 비교하고 부분적으로 패치를 수행합니다. 따라서 상위 컴포넌트 업데이트로 인한 불필요한 하위 컴포넌트 업데이트를 방지하기 위해 React는 shouldComponentUpdate에서 논리적 판단을 내리고, 불필요한 렌더링을 줄이고, 가상 DOM을 재생성하여 차이 비교 프로세스를 수행할 수 있습니다.2 . vue, Object.defineProperty를 통해 이러한 모든 데이터 속성을 getter/setter로 변환합니다. 동시에 감시자 인스턴스 객체는 구성 요소가 렌더링될 때 속성을 dep로 기록합니다. dep 항목의 setter가 호출되면 watch에 다시 계산하라는 알림이 전달되어 관련 구성 요소가 업데이트됩니다.

Diff 알고리즘은 요소의 키를 사용하여 요소의 추가, 삭제 또는 수정 여부를 결정함으로써 불필요한 요소 다시 렌더링을 줄입니다.

추천 학습: "

react 비디오 튜토리얼

"

위 내용은 반응과 Vue 가상 돔의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!