vue 에서 가상 dom 에 대한 이해 지식 총화

본질은 일반적인 js 대상 으로 보기 인터페이스 구 조 를 묘사 하 는 데 사용 된다.
mouted 의 반전 에서 출력 가능vnode，


 그림 을 통 해 알 수 있 듯 이,vnode 에는 다음 과 같은 몇 가지 주요 속성 이 있 습 니 다.

tag:구성 요소 의 태그 이름,

데이터:구성 요소 의 속성
children:구성 요소 의 하위 태그parent:아버지 급 원소render 함수:
역할:가상 dom 생 성,

 모든 구성 요 소 는 가상 dom 이 있 고 가상 dom 은 render 함수 에 의 해 만들어 집 니 다.
가상 dom 트 리 사용 목적:렌 더 링 효율 향상
vue 에 서 는 보 기 를 렌 더 링 할 때 render 함 수 를 호출 합 니 다.이러한 렌 더 링 은 구성 요소 가 생 성 될 때 뿐만 아니 라 보기 에 의존 하 는 데이터 업데이트 때 도 발생 합 니 다.
실제 dom 의 생 성,업데이트 로 인해.삽입 등 작업 은 대량의 성능 소 모 를 가 져 와 렌 더 링 효율 을 낮 추기 때문에 가상 dom 트 리 를 사용 하여 실제 dom 을 대체 합 니 다.
가상 dom 은 어떻게 진실 dom 로 전환 합 니까?
구성 요소 인 스 턴 스 첫 렌 더 링:가상 dom 트 리 를 만 들 고 가상 dom 트 리 에 따라 실제 dom 을 만 들 고 실제 dom 을 페이지 의 적당 한 위치 에 마 운 트 합 니 다.이때 모든 가상 dom 은 실제 dom 에 대응 합 니 다.
비고:가상 dom 에서 모두 elm 속성,즉 진실 dom 이다.즉,생 성 된 가상 dom 은 모두 진실 dom 을 창조 했다.즉,첫 번 째 렌 더 링 은 단순히 dom 요 소 를 만 드 는 것 보다 효율 이 낮 고 vue 의 효율 은 응답 식 데이터 변화의 가상 dom 대비 에 나타난다.
구성 요소 가 의존 하 는 데이터 가 응답 식 데이터 의 영향 을 받 았 을 때:render 함 수 를 다시 호출 하여 가상 dom 트 리 를 만 들 고 신 구 가상 dom 트 리 를 비교 하면 vue 는 최소 업 데 이 트 량 을 찾 은 다음 에 필요 한 가상 dom 노드 를 업데이트 하고 마지막 으로 해당 하 는 진실 dom 을 수정 합 니 다.이렇게 하면 진실 dom 에 대한 최소한 의 변동 을 보장 할 수 있다.
실제 dom 의 속성 수량 은 가상 dom 속성 보다 훨씬 많 고 실제 dom 에 대한 추가 삭 제 는 정렬 재 구축 문 제 를 초래 할 수 있 습 니 다.이것 은 성능 을 매우 소모 한다.
비고:실제 dom 과 일반 대상 이 만 든 시간 비교


 dom 대상 이 일반 대상 을 만 드 는 데 20 배 이상 걸 리 는 것 을 알 수 있다.
템 플 릿 과 가상 dom 의 관계
vue 프레임 워 크 에 copile 템 플 릿 이 있 습 니 다.템 플 릿 을 render 함수 로 변환 하 는 것 을 담당 하고 render 함수 가 호출 되면 가상 dom 을 얻 을 수 있 습 니 다.
컴 파일 과정 은 두 단계 로 나 뉜 다.
1.템 플 릿 문자열 을 AST(추상 문법 트 리 로 변환 하고 js 트 리 구조 로 원본 코드 를 설명 하 며 아래 그림 은 AST 온라인 변환 을 통 해 구 조 를 볼 수 있 습 니 다.

2.AST 를 render 함수 로 변환
실행 시 컴 파일 과 템 플 릿 사전 컴 파일
전통 적 인 도입 방식 을 사용 하면 컴 파일 이 발생 하 는 시간 을 구성 요소 로 처음 불 러 올 때 실행 시 컴 파일 이 됩 니 다.
vue-cli 의 기본 상황 에서 컴 파일 은 포장 할 때(npm run build/serve)발생 하여 템 플 릿 사전 컴 파일 이 됩 니 다.
컴 파일 은 성능 을 매우 소모 하 는 작업 으로 사전 컴 파일 은 실행 시의 성능 을 효과적으로 향상 시 킬 수 있 으 며,실행 할 때 컴 파일 이 필요 하지 않 기 때문에 vue-cli 는 포장 할 때 vue 중의 copile 모듈 을 제거 하여 포장 부 피 를 줄인다.템 플 릿 의 존 재 는 개발 자 들 이 코드 를 더욱 편리 하 게 쓰기 위해 서 입 니 다.
지식 포인트 확장:
가상 dom 의 역할
현재 주류 의 프레임 워 크 는 모두 성명 식 조작 dom 의 프레임 워 크 이다.우 리 는 상태 와 dom 간 의 매 핑 관 계 를 설명 하기 만 하면 됩 니 다.상태 에서 보기(진실 한 dom)로 전환 하면 프레임 워 크 가 도와 줄 것 입 니 다.
가장 거 친 방법 은 상 태 를 보기 로 과장 하고 상 태 를 업데이트 할 때마다 전체 보 기 를 다시 업데이트 하 는 것 이다.
이런 방법의 성능 은 가히 짐작 할 수 있다.좋 은 생각 은 상태 가 바 뀌 고 상태 와 관련 된 dom 노드 만 업데이트 하 는 것 이다.가상 dom 은 그 생각 을 실현 하 는 방법 중 하나 일 뿐이다.
구체 적 인 방법:
상태->진실 dom(최초)
상태->가상 dom->실제 dom(가상 dom 사용)
상태 가 바 뀌 면 가상 dom 을 다시 만 들 고 이전 과 이 가상 dom 을 비교 하여 업데이트 해 야 할 부분 을 찾 아 진실 dom 을 업데이트 합 니 다.
vue 의 가상 dom
실제 dom 은 노드(Node)로 구성 되 고 가상 dom 은 가상 노드(vNode)로 구성 된다.
가상 dom 은 vue 에서 주로 두 가지 일 을 합 니 다.
실제 노드(Node)에 대응 하 는 가상 노드(vNode)제공
새로운 가상 노드 와 오래된 가상 노드 를 비교 하여 필요 한 차 이 를 찾아내 고 보 기 를 업데이트 합 니 다.
vue 에서 가상 dom 에 대한 이해 지식 을 정리 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 에서 가상 dom 에 대한 이해 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!