vue 2.0 의 가상 DOM 렌 더 링 사고 분석

1.가상 DOM 이 왜 필요 한가
앞에서 우 리 는 0 부터 간단 한 클래스 Vue 프레임 워 크(글 링크)를 썼 습 니 다.그 중의 템 플 릿 분석 과 렌 더 링 은 Compile 함 수 를 통 해 이 루어 졌 습 니 다.페이지 의 DOM 요 소 를 직접 조작 하 는 대신 문서 조각 을 사 용 했 습 니 다.데이터 변경 이 완 료 된 후에 appendChild 함 수 를 통 해 실제 DOM 을 페이지 에 삽입 합 니 다.
문서 조각 을 사 용 했 지만 실제 DOM 을 작 동 했다.
한편,우 리 는 DOM 을 조작 하 는 대가 가 비 싼 것 을 알 기 때문에 vue 2.0 은 가상 DOM 을 사용 하여 실제 DOM 에 대한 조작 을 대체 하고 마지막 으로 특정한 체 제 를 통 해 실제 DOM 에 대한 업데이트,렌 더 링 보 기 를 완성 했다.
가상 DOM 이란 JS 로 DOM 구 조 를 모 의 하고 DOM 의 변화 조작 을 JS 층 에 두 어 하 는 것 으로 DOM 에 대한 조작 을 최소 화 하 는 것 이다.그 다음 에 앞 뒤 두 번 의 가상 DOM 의 변 화 를 비교 하고 변 화 된 부분 만 다시 렌 더 링 하고 변화 가 없 는 부분 은 다시 렌 더 링 하지 않 습 니 다.
예 를 들 어 우 리 는 다음 과 같은 DOM 구 조 를 가지 고 있다.


<ul id="list">
   <li class="item1">Item 1</li>
   <li class="item2">Item 2</li>
</ul>

우 리 는 JS 대상 으로 위의 DOM 구 조 를 충분히 모 의 할 수 있 고 모 의 한 후에 아래 의 이런 구조 가 될 것 이다.


var vdom = {
  tag: 'ul',
  attr: {
    id: 'list',
  },
  children: [
    {
      tag: 'li',
      attrs: {
        className: 'item',
        children: ['Item 1']
      },
    },
    {
      tag: 'li',
      attrs: {
        className: 'item',
        children: ['Item 2']
      }
    }
  ]
}

주의해 야 할 것 은 JS 가 모 의 한 DOM 구 조 는 모든 DOM 노드 의 속성,방법(DOM 노드 자체 의 속성 이 매우 많 기 때문에 이것 도 DOM 작업 소모 성능 의 한 점)을 모 의 한 것 이 아니 라 데이터 작업 과 관련 된 속성 과 방법 만 모 의 한 것 이다.
2.가상 DOM 을 어떻게 사용 하 는가
Vue 는 2.0 버 전에 vdom 을 도입 했다.그 vdom 은 snabdom 라 이브 러 리 를 기반 으로 한 수정 입 니 다.snabdom 은 오픈 소스 의 vdom 라 이브 러 리 입 니 다.
snabbdom 의 주요 역할 은 들 어 오 는 JS 시 뮬 레이 션 의 DOM 구 조 를 가상 DOM 노드 로 바 꾸 는 것 이다.
먼저 그 중의 h 함 수 를 통 해 JS 가 모 의 한 DOM 구 조 를 가상 DOM 으로 변환 한 다음 에 그 중의 patch 함 수 를 통 해 가상 DOM 을 실제 DOM 으로 변환 하여 페이지 에 렌 더 링 합 니 다.
페이지 의 렌 더 링 을 최소 화하 기 위해 snabdom 은 Diff 알고리즘 을 도입 하여 Diff 알고리즘 을 통 해 앞 뒤 두 가상 DOM 간 의 차 이 를 찾아내 고 변 경 된 DOM 노드 만 업데이트 하 며 변 경 된 DOM 노드 로 다시 렌 더 링 하지 않 습 니 다.
여기 서 나 는 snabdom 의 소스 코드 를 분석 하여 도대체 snabdom 이 어떻게 이 일 을 해 냈 는 지 설명 할 생각 이 없다.게다가 이미 많은 학우 들 이 비슷 한 분석 을 했 고 관련 링크 는 문장 말미 에 첨부 되 었 다.
나 는 snabdom 의 사용 측면 에서 Vue 의 가상 DOM 이 어떻게 보기 렌 더 링 을 완 성 했 는 지 볼 것 이다.
snabdom 의 두 핵심 API 기능 부터 살 펴 보 겠 습 니 다.
h()함수:들 어 오 는 JS 시 뮬 레이 션 의 DOM 구조 템 플 릿 을 vnode 로 변환 합 니 다.(vnode 는 순수 JS 대상)
patch()함수:가상 DOM 노드 를 페이지 에 렌 더 링 합 니 다.
우 리 는 snabdom 의 실제 작용 을 보기 위해 실례 를 제공 합 니 다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <button id="btn-change">change</button>
  <!--   snabbdom ，            ，         。            DOM     ，        
               ，              -->
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
  <script>
    //  patch  
    var patch = snabbdom.init([
      snabbdom_class,
      snabbdom_props,
      snabbdom_style,
      snabbdom_eventlisteners
    ])
    //  h  
    var h = snabbdom.h;
    //    vnode
    var vnode = h('ul#list',{},[
      h('li.item',{},['Item 1']),
      h('li.item',{},['Item 2']),
    ])
　　　　　//console.log(vnode);
    //  container
    var container = document.getElementById('container');
    patch(container,vnode);//    
    var btn = document.getElementById('btn-change');
    btn.onclick = function() {
      var newVnode = h('ul#list',{},[
        h('li.item',{},['Item 1']),
        h('li.item',{},['Item B']),
        h('li.item',{},['Item 3']),
      ])
      patch(vnode,newVnode);//    
　　　　　　　vnode = newVnode;//     newVnode   vnode
　　　　　　    }
  </script>
</body>
</html>

사고 분석:
4.567917.우 리 는 먼저 h 함 수 를 통 해 가상 DOM 노드 를 만 들 고 patch 함 수 를 통 해 가상 DOM 을 페이지 에 렌 더 링 합 니 다.

btn 단 추 를 누 르 면 ul\#list 목록 의 데 이 터 를 업데이트 하고 두 번 째 li 요소 의 값 을 바 꾸 었 으 며 li 요 소 를 추 가 했 습 니 다.첫 번 째 li 요소 의 값 은 변 하지 않 았 습 니 다.우 리 는 패 치 함 수 를 통 해 업 데 이 트 된 데 이 터 를 페이지 에 다시 렌 더 링 합 니 다.두 번 째 와 세 번 째 li 만 업 데 이 트 된 것 을 볼 수 있 습 니 다.첫 번 째 li 는 변 하지 않 았 기 때문에 다시 렌 더 링 하지 않 았 습 니 다

vue 의 템 플 릿 분석 과 렌 더 링 의 핵심 은 snabdom 과 유사 한 h()와 patch()함 수 를 통 해 먼저 템 플 릿 을 vnode 로 해석 하고 첫 번 째 렌 더 링 이 라면 patch(container,vnode)를 통 해 vnode 를 페이지 로 렌 더 링 하고 두 번 째 렌 더 링 이 라면patch(vnode,newVnode)Diff 알고리즘 을 통 해 원래 vnode 와 newVnode 의 차 이 를 비교 하여 최소 의 대가 로 페이지 를 렌 더 링 하 는 것 입 니 다.
총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 vue 2.0 의 가상 DOM 렌 더 링 사고 분석 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

자바 메모리 모델 의 가상 스 택 원리 분석

2.자바 스 택 에 저 장 된 것 은 스 택 프레임 입 니 다.스 택 프레임 마다 호출 되 는 방법 에 대응 합 니 다.스 택 프레임 에는 부분 변수 표(Local Variables),작업 스 택(Operand St...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue 2.0 의 가상 DOM 렌 더 링 사고 분석

좋은 웹페이지 즐겨찾기