Vue. js 2.0 정탐 의 Virtual DOM 은 도대체 무엇 입 니까?

Virtual DOM 이 뭐 예요?
앞서 리 액 트 와 엠 버 는 이미 가상 DOM 기술 로 페이지 업데이트 속 도 를 높이 기 시작 했다.그것 이 어떻게 일 하 는 지 알 고 싶다 면 먼저 이 몇 가지 개념 을 인식 해 야 한다.
1. DOM 을 업데이트 하 는 것 은 매우 비 싼 작업 이다.
자바 script 을 사용 하여 페이지 를 수정 할 때 브 라 우 저 는 DOM 노드 를 찾 아 변경 하 는 작업 을 했 습 니 다. 예 를 들 어:

document.getElementById('myId').appendChild(myNewNode);

현대 의 응용 에서 수천 수만 개의 DOM 노드 가 있 을 것 이다.그래서 업데이트 할 때 발생 하 는 계산 이 매우 비싸다.자질구레 하고 잦 은 업 데 이 트 는 페이지 를 느리게 하 는 동시에 불가피 하 다.
2. DOM 노드 대신 JavaScript 대상 을 사용 할 수 있 습 니 다.
DOM 노드 가 HTML 문서 에서 의 표현 은 보통 다음 과 같다.

Item 1

Item 2

DOM 노드 도 자바 스 크 립 트 대상 이 라 고 표시 할 수 있 습 니 다. 이렇게:

// Javascript    DOM      
Let domNode = {
 tag: 'ul'
 attributes: { id: 'myId' }
 children: [
//    li
 ]
};

이것 이 바로 가상의 DOM 노드 입 니 다. 이해 하기 쉽 죠?
3. 가상 노드 를 업데이트 하면 비 싸 지 않 습 니 다.

//    DOM   
domNode.children.push('

Item 3');
만약 우리 가 가상 DOM 을 사용한다 면 .getElementById 과 같은 방법 을 직접 호출 하 는 것 이 아니 라 자 바스 크 립 트 대상 만 조작 하 는 것 은 상당히 싸다.
그리고 변 경 된 부분 을 진정한 DOM 으로 업데이트 합 니 다. 방법 은 다음 과 같 습 니 다.

//       DOM API     DOM 
//               
sync(originalDomNode, domNode);

Vue. js 가 2.0 버 전에 서 가상 DOM 을 도입 하 는 것 이 올 바른 선택 입 니까?
가상 DOM 도입 은 사실상 장점 도 단점 도 있다.
1. 사이즈
더 많은 기능 은 더 많은 코드 를 의미한다.다행히도 Vue. js 2.0 은 여전히 상당히 작다 (21.4kb 현재 버 전).
2. 메모리
가상 DOM 은 메모리 에 DOM 복사 본 을 유지 해 야 합 니 다.DOM 업데이트 속도 와 메모리 사용 공간 사이 의 균형 을 잡 습 니 다.
3. 모든 상황 에 적합 한 것 이 아니다.
가상 DOM 이 대량으로 바 뀌 면 적절 하 다.그러나 단일 하고 자주 업데이트 되면 가상 DOM 은 계산 작업 을 처리 하 는 데 더 많은 시간 을 들일 것 이다.따라서 만약 에 DOM 노드 가 상대 적 으로 적은 페이지 가 있다 면 가상 DOM 을 사용 하면 실제 적 으로 더 느 릴 수 있 습 니 다.하지만 대부분의 단일 페이지 에 서 는 더 빠 를 것 으로 보인다.
성능 향상 외 에 또 무엇이 있 습 니까?
가상 DOM 을 도입 하 는 것 은 성능 강화 뿐만 아니 라 더 많은 기능 을 의미한다.
예 를 들 어 가상 DOM 의 render() 방법 으로 새로운 노드 를 직접 만 들 수 있 습 니 다.

new Vue({
 el: '#app',
 data: {
 message: 'hello world'
 },
 render() {
 var node = this.$createElement;
 return node(
 'div', 
 { attrs: { id: 'myId' } }, 
 this.message
 );
 }
});

출력:

 
hello world

왜 그 랬 어 요?전체 프로 그래 밍 언어 인 자바 스 크 립 트 로 프로 그래 밍 할 수 있 습 니 다. 공장 식 기능 을 만들어 가상 노드 를 만 들 수 있 습 니 다.
총결산
이상 은 이 글 의 모든 내용 입 니 다. 본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다. 궁금 한 점 이 있 으 면 댓 글 을 남 겨 주 십시오.