Vue 가상 DOM이란 무엇입니까? vue의 가상 DOM 사용-JS 튜토리얼-php.cn

Vue 가상 DOM이란 무엇입니까? vue의 가상 DOM 사용

不言

풀어 주다： 2018-08-09 11:00:34

원래의

12808명이 탐색했습니다.

Vue의 가상 DOM은 js를 사용하여 DOM 구조를 시뮬레이션합니다. 이 기사의 내용은 vue 가상 DOM이 무엇인지 친구들에게 소개하는 것입니다. vue의 가상 DOM 사용법과 함께 기사의 구체적인 내용을 살펴보겠습니다.

1. 가상 DOM이 필요한 이유

앞서 우리는 페이지를 직접 편집하는 대신 문서 조각을 사용하여 컴파일 기능을 통해 템플릿 구문 분석 및 렌더링을 수행하는 간단한 Vue와 같은 프레임워크를 작성했습니다. DOM 요소는 데이터 변경을 완료한 후appendChild 함수를 통해 페이지에 실제 DOM을 삽입합니다.

문서 조각을 사용하더라도 실제 DOM은 여전히 작동합니다.

그리고 우리는 DOM 운영이 비용이 많이 든다는 것을 알고 있으므로 vue2.0은 가상 DOM을 사용하여 실제 DOM의 운영을 대체하고 마지막으로 일부 메커니즘을 사용하여 실제 DOM의 업데이트를 완료하고 뷰를 렌더링합니다.

일명 가상 DOM은 실제로 JS를 사용하여 DOM 구조를 시뮬레이션하고, DOM 변경 작업을 JS 레이어에 두어 DOM 작업을 최소화합니다(개인적으로는 JS 작업이 이전보다 훨씬 빠르기 때문이라고 생각합니다). DOM 운영) JS가 몇 번이나 효율적으로 실행되는지 알 수 있습니다. 그런 다음 가상 DOM의 변경 사항을 전후로 두 번 비교하면 변경된 부분만 다시 렌더링되고 변경되지 않은 부분은 다시 렌더링되지 않습니다.

예를 들어 다음과 같은 DOM 구조가 있습니다.

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

로그인 후 복사

위의 DOM 구조를 시뮬레이션하기 위해 JS 객체를 완전히 사용할 수 있습니다. 시뮬레이션 후에는 다음과 같은 구조가 됩니다.

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

}

로그인 후 복사

JS에서 시뮬레이션한 DOM 구조는 모든 DOM 노드의 속성과 메서드를 시뮬레이션하지 않는다는 점에 유의해야 합니다(DOM 노드 자체에는 많은 속성이 있고 이는 DOM 작업이 성능을 소비하는 지점이기도 하기 때문입니다). 이지만 데이터 작업과 관련된 속성 및 메서드의 일부만 시뮬레이션합니다.

2. vue 가상 DOM 사용

Vue는 버전 2.0에서 vdom을 도입했습니다. vdom은 snabbdom 라이브러리의 수정 사항을 기반으로 합니다. snabbdom은 오픈 소스 vdom 라이브러리입니다.

snabbdom의 주요 기능은 들어오는 JS 시뮬레이션 DOM 구조를 가상 DOM 노드로 변환하는 것입니다.

먼저 JS 시뮬레이션 DOM 구조를 h 함수를 통해 가상 DOM으로 변환한 다음, 패치 함수를 통해 가상 DOM을 실제 DOM으로 변환하고 페이지에 렌더링합니다.

페이지의 렌더링을 최소화하기 위해 snabbdom은 Diff 알고리즘을 사용하여 두 가상 DOM 전후의 차이점을 찾고 변경된 DOM 노드만 다시 렌더링하지 않고 업데이트하는 Diff 알고리즘을 도입합니다. DOM 노드를 변경했습니다.

여기서는 snabbdom이 어떻게 작동하는지 설명하기 위해 snabbdom의 소스 코드를 분석하지는 않을 것입니다(주로 현 단계에서는 그런 수준이 아니기 때문입니다, 하하). 또한, 많은 학생들이 이미 유사한 분석을 수행했습니다. 기사 마지막에 첨부).

snabbdom을 사용하는 관점에서 Vue의 가상 DOM이 어떻게 뷰 렌더링을 완성하는지 살펴보겠습니다.

먼저 snabbdom의 두 가지 핵심 API의 기능을 살펴보겠습니다.

h() 함수: 들어오는 JS 시뮬레이션 DOM 구조 템플릿을 vnode로 변환합니다. (vnode는 순수 JS 객체입니다.)
patch() 함수: 가상 DOM 노드를 페이지에 렌더링합니다.

snabbdom의 실제 기능을 볼 수 있도록 예시를 제공합니다.

<!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>
    <p id="container"></p>
    <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(&#39;ul#list&#39;,{},[
            h(&#39;li.item&#39;,{},[&#39;Item 1&#39;]),
            h(&#39;li.item&#39;,{},[&#39;Item 2&#39;]),
        ])
　　　　　//console.log(vnode);
        //获取container
        var container = document.getElementById(&#39;container&#39;);
        patch(container,vnode);//初次渲染

        var btn = document.getElementById(&#39;btn-change&#39;);
        btn.onclick = function() {            
        var newVnode = h(&#39;ul#list&#39;,{},[
                h(&#39;li.item&#39;,{},[&#39;Item 1&#39;]),
                h(&#39;li.item&#39;,{},[&#39;Item B&#39;]),
                h(&#39;li.item&#39;,{},[&#39;Item 3&#39;]),
            ])
            patch(vnode,newVnode);//再次渲染　　　　　　　
            vnode = newVnode;//将修改后的newVnode赋值给vnode　　　　　　        
            }    
            </script>
            </body>
            </html>

로그인 후 복사

아이디어 분석:

먼저 h 함수를 통해 가상 DOM 노드를 생성하고, 패치 함수를 통해 가상 DOM을 페이지에 렌더링합니다.
btn 버튼을 클릭하면 ul#list 목록의 데이터가 업데이트되고 두 번째 li 요소의 값이 변경되며 새 li 요소가 추가됩니다. 첫 번째 li 요소의 값은 변경되지 않습니다. 패치 기능을 통해 업데이트된 데이터를 페이지에 다시 렌더링합니다. 두 번째와 세 번째 Li만 업데이트되고 첫 번째 Li는 변경되지 않았기 때문에 다시 렌더링되지 않는 것을 볼 수 있습니다.

vue의 템플릿 구문 분석 및 렌더링의 핵심은 snabbdom의 h() 및 patch()와 유사한 기능을 통해 템플릿을 먼저 vnode로 구문 분석한 다음 patch( 컨테이너, vnode)가 vnode를 페이지에 렌더링하는 경우 patch(vnode, newVnode)를 사용하여 먼저 Diff 알고리즘을 통해 원본 vnode와 newVnode의 차이를 비교하고 최소 비용으로 페이지를 다시 렌더링합니다. .