vue 가상 DOM 의 원리

왜 가상 DOM 이 필요 합 니까?
전단 작업 을 추상 화하 면 상태 유지 와 보기 업데이트 가 주 를 이 루 고 보기 업데이트 와 유지 상 태 는 DOM 작업 이 필요 합 니 다.사실 최근 몇 년 동안 전단 의 구 조 는 주로 DOM 작업 의 복잡성 을 해방 시 키 는 것 이다.
js 를 실행 하 는 속 도 는 매우 빠 르 고 대량의 DOM 작업 이 느 려 집 니 다.데 이 터 를 업데이트 한 후에 페이지 를 다시 렌 더 링 합 니 다.그러면 데 이 터 를 바 꾸 지 않 은 곳 에서 도 DOM 노드 를 다시 렌 더 링 하여 어느 정도 의 자원 낭 비 를 초래 합 니 다.
jQuery 가 나타 나 기 전에 우 리 는 DOM 구 조 를 직접 조작 했다.이런 방법 은 복잡 도가 높 고 호환성 도 떨 어 졌 다.jQuery 의 강력 한 선택 기와 고도 로 포 장 된 API 가 있어 서 우 리 는 DOM 을 더욱 편리 하 게 조작 할 수 있 습 니 다.jQuery 는 호환성 문 제 를 처리 하 는 동시에 DOM 작업 도 간단 해 집 니 다.
그러나 똑똑 한 프로그래머 는 이에 만족 할 수 없다.각종 MVVM 프레임 워 크 가 생 겨 났 다.angularJS,avalon,vue.js 등 이 있 고 MVVM 은 데이터 양 방향 연결 을 사용 하여 DOM 을 조작 할 필요 가 전혀 없다.상 태 를 업데이트 하면 보 기 는 자동 으로 업데이트 된다.보기 데이터 상 태 를 업데이트 하면 자동 으로 업 데 이 트 됩 니 다.MVVM 은 전단 의 개발 효율 을 크게 향상 시 켰 다 고 할 수 있 습 니 다.그러나 대량의 사건 연결 로 인해 복잡 한 장면 에서 의 집행 성능 이 걱정 되 고 개발 효율 과 집행 효율 을 동시에 고려 하 는 방안 이 있 습 니까?이 를 통 해 Virtual DOM(가상 DOM)을 도입 한다.
메모리 에서 실제 DOM 과 대응 하 는 데이터 구 조 를 생 성 하 는 것 을 이용 하여 메모리 에서 생 성 된 구 조 를 가상 DOM 이 라 고 합 니 다.
데이터 가 변 했 을 때 재 렌 더 링 구성 요소 의 최소 대 가 를 스마트 하 게 계산 하여 DOM 작업 에 적용 할 수 있 습 니 다.
가상 DOM 알고리즘
가상 DOM 알고리즘 이란몇 가지 절 차 를 포함한다.
1.JavaScript 대상 구조 로 DOM 트 리 의 구 조 를 표시 합 니 다.그리고 이 트 리 로 진정한 DOM 트 리 를 만들어 문서 에 꽂 기;
2.상태 가 바 뀌 었 을 때 새로운 대상 나 무 를 다시 만든다.그리고 새로운 나무 와 낡은 나 무 를 비교 하여 두 나무의 차 이 를 기록한다.
3.기 록 된 차 이 를 1 단계 에 구 축 된 진정한 DOM 트 리 에 적용 하면 보기 가 업 데 이 트 됩 니 다.
Virtual DOM 은 본질 적 으로 JS 와 DOM 사이 에 캐 시 를 만 들 었 다.CPU 와 하 드 디스크 를 비교 할 수 있 습 니 다.하 드 디스크 가 이렇게 느 린 이상 우 리 는 그들 사이 에 캐 시 를 추가 합 니 다.
DOM 이 이렇게 느 린 이상 JS 와 DOM 사이 에 캐 시 를 추가 합 니 다.CPU(JS)는 메모리(Virtual DOM)만 조작 하고 마지막 에 변경 사항 을 하 드 디스크(DOM)에 기록 합 니 다.
가상 dom,즉 가상 노드 입 니 다.이것 은 js 의 Object 대상 을 통 해 DOM 의 노드 를 모 의 한 다음 에 특정한 render 방법 으로 이 를 실제 DOM 노드 dom 로 렌 더 링 합 니 다.diff 는 JS 차원 의 계산 을 통 해 패 치 대상,즉 패 치 대상 을 되 돌려 주 고 특정한 조작 을 통 해 패 치 대상 을 분석 하여 페이지 의 리 렌 더 링 을 완성 합 니 다.

가상 DOM 트 리 두 그루 의 차 이 를 비교 하 다
두 개의 DOM 트 리 의 차 이 를 비교 하 는 것 은 Virtual DOM 알고리즘 의 가장 핵심 적 인 부분 이자 이른바 Virtual DOM 의 diff 알고리즘 이다.
두 나무의 완전한 diff 알고리즘 은 시간 복잡 도가 O(n^3)인 문제 입 니 다.하지만 전단 에 서 는 DOM 요 소 를 등급 을 넘 어 이동 하 는 경 우 는 드물다.그래서 Virtual DOM 은 같은 등급 의 요소 만 비교 합 니 다.

위의 div 는 같은 층 의 div 와 만 비교 하고 2 층 의 것 은 2 층 과 만 비교 할 수 있 습 니 다.이렇게 알고리즘 의 복잡 도 는 O(n)에 도달 할 수 있다.
실제 코드 에 서 는 신 구 두 그루 의 나 무 를 깊이 있 게 옮 겨 다 니 며 각 노드 에 유일한 표 시 를 할 수 있 습 니 다.다음 그림 과 같 습 니 다.

가상 DOM 알고리즘 구현
Virtual DOM 알고리즘 은 주로 세 가지 함수:element,diff,patch 를 사용 합 니 다.그리고 다음 코드 와 같이 실제 적 으로 사용 할 수 있 습 니 다.

// 1.     DOM
var tree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: blue'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li')])
])

// 2.     DOM     DOM
var root = tree.render()
document.body.appendChild(root)

// 3.       DOM
var newTree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: red'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li'), el('li')])
])

// 4.       DOM    
var patches = diff(tree, newTree)

// 5.     DOM       
patch(root, patches)

diff 알고리즘
3 대 전략 으로 O(n^3)의 복잡 도 를 O(n)의 복잡 도로 전환시키다

전략 1(tree diff):

웹 UI 에서 DOM 노드 의 등급 간 이동 동작 이 매우 적어 무시 할 수 있 습 니 다.

전략 2(component diff):

같은 종류의 두 구성 요 소 를 가지 고 비슷 한 트 리 구 조 를 만 듭 니 다.
서로 다른 두 구성 요 소 를 가지 고 서로 다른 트 리 구 조 를 생 성 합 니 다.

전략 3(element diff):

같은 등급 의 하위 노드 에 대해 유일한 id 로 구분 합 니 다.
tree diff
(1)updateDepth 를 통 해 Virtual DOM 트 리 를 등급 별로 제어 한다.
(2)나무의 층 을 비교 하고 두 그루 의 나 무 는 같은 층 의 노드 만 비교 한다.만약 에 이 노드 가 존재 하지 않 을 때 이 노드 와 그 하위 노드 는 완전히 삭제 되 고 더 이상 비교 하지 않 을 것 이다.
(3)한 번 만 옮 겨 다 니 면 전체 DOM 나무의 비 교 를 완성 할 수 있다.

diff 는 같은 등급 의 노드 위치 변환 만 간단하게 고려 합 니 다.만약 에 등급 을 뛰 어 넘 으 면 노드 를 만 들 고 노드 를 삭제 하 는 작업 만 있 습 니 다.

위의 그림 에서 보 듯 이 A 를 뿌리 노드 로 하 는 전체 나 무 는 이동 이 아니 라 다시 만 들 수 있 기 때문에 공식 적 으로 DOM 노드 의 크로스 레이 어 작업 을 하지 말고 CSS 를 통 해 노드 를 숨 기 고 표시 할 수 있 으 며 DOM 노드 를 진정 으로 제거 하고 추가 하 는 것 이 아니 라 CSS 를 통 해 노드 를 숨 길 수 있 습 니 다.
이상 은 vue 가상 DOM 의 원리 에 대한 상세 한 내용 입 니 다.vue 가상 DOM 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!