Was ist Vue Virtual DOM? Nutzung des virtuellen DOM von vue

Vues virtuelles DOM verwendet js, um die DOM-Struktur zu simulieren. Der Inhalt dieses Artikels besteht darin, Freunden vorzustellen, was das virtuelle DOM von Vue ist. Werfen wir neben der Verwendung des virtuellen DOM von vue auch einen Blick auf den spezifischen Inhalt des Artikels.

1. Warum virtuelles DOM benötigt wird

Zuvor haben wir ein einfaches Vue-ähnliches Framework von Grund auf geschrieben, in dem das Parsen und Rendern von Vorlagen über die Kompilierungsfunktion abgeschlossen wird. Die Dokumentfragmentierung wird verwendet, anstatt die DOM-Elemente auf der Seite direkt zu bearbeiten. Nachdem die Daten geändert wurden, wird das echte DOM über die Funktion appendChild in die Seite eingefügt.

Obwohl Dokumentfragmente verwendet werden, wird weiterhin das echte DOM betrieben.

Wir wissen, dass der Betrieb von DOM teuer ist. Daher verwendet vue2.0 virtuelles DOM, um den Betrieb von realem DOM zu ersetzen, und verwendet schließlich einen Mechanismus, um die Aktualisierung von realem DOM abzuschließen und die Ansicht zu rendern.

Das sogenannte virtuelle DOM verwendet tatsächlich JS, um die DOM-Struktur zu simulieren, und platziert die DOM-Änderungsoperationen auf der JS-Ebene, um die Operationen auf dem DOM zu minimieren (ich denke, das ist hauptsächlich so). weil der Betrieb von JS um ein Vielfaches schneller ist als der Betrieb von DOM und JS hocheffizient ist. Vergleichen Sie dann die Änderungen im virtuellen DOM zweimal vorher und nachher, und nur die geänderten Teile werden neu gerendert, während die unveränderten Teile nicht neu gerendert werden.

Zum Beispiel haben wir die folgende DOM-Struktur.

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

Wir können JS-Objekte vollständig verwenden, um die obige DOM-Struktur zu simulieren, und nach der Simulation wird daraus die folgende Struktur.

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

}

Es muss beachtet werden, dass die von JS simulierte DOM-Struktur nicht die Eigenschaften und Methoden auf allen DOM-Knoten simuliert (da die Eigenschaften des DOM-Knotens selbst sind sehr (dies ist auch ein Punkt, an dem DOM-Operationen Leistung verbrauchen), simulieren jedoch nur einen Teil der Eigenschaften und Methoden im Zusammenhang mit Datenoperationen.

2. Verwendung des virtuellen Vue-DOM

Vue hat vdom in Version 2.0 eingeführt. Sein vdom basiert auf Modifikationen, die von der snabbdom-Bibliothek vorgenommen wurden. snabbdom ist eine Open-Source-VDOM-Bibliothek.

Die Hauptfunktion von snabbdom besteht darin, die eingehende JS-simulierte DOM-Struktur in virtuelle DOM-Knoten umzuwandeln.

Konvertieren Sie zunächst die von JS simulierte DOM-Struktur über die h-Funktion in ein virtuelles DOM, konvertieren Sie dann das virtuelle DOM über die Patch-Funktion in ein reales DOM und rendern Sie es auf der Seite.

Um die minimale Darstellung der Seite sicherzustellen, führt snabbdom den Diff-Algorithmus ein, der den Diff-Algorithmus verwendet, um den Unterschied zwischen den beiden virtuellen DOMs vorher und nachher zu ermitteln, und nur die geänderten DOM-Knoten ohne erneute Aktualisierung aktualisiert -Rendern der geänderten DOM-Knoten.

Hier werde ich nicht den Quellcode von snabbdom analysieren, um zu erklären, wie snabbdom das macht (hauptsächlich, weil es zu diesem Zeitpunkt noch nicht auf diesem Niveau ist, haha. Darüber hinaus haben viele Studenten bereits eine ähnliche Analyse durchgeführt). entsprechende Links finden Sie am Ende des Artikels).

Ich werde mir aus der Perspektive der Verwendung von Snabbdom ansehen, wie das virtuelle DOM in Vue das Rendern von Ansichten vervollständigt.

Werfen wir zunächst einen Blick auf die Funktionen der beiden Kern-APIs in snabbdom.

• h()-Funktion: Konvertieren Sie die eingehende JS-simulierte DOM-Strukturvorlage in vnode. (vnode ist ein reines JS-Objekt)

• patch()-Funktion: Rendern Sie virtuelle DOM-Knoten in die Seite.

Wir geben ein Beispiel, um die tatsächliche Funktion von Snabbdom zu sehen.

<!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>

Ideenanalyse:

• Wir erstellen zunächst einen virtuellen DOM-Knoten durch h Funktion: Rendern Sie das virtuelle DOM über die Patch-Funktion auf der Seite.

• Wenn Sie auf die BTN-Schaltfläche klicken, werden die Daten der ul#list-Liste aktualisiert, der Wert des zweiten li-Elements geändert und ein neues li-Element sowie der Wert hinzugefügt des ersten li-Elements wird zusammengeführt. Es hat sich nichts geändert. Wir rendern die aktualisierten Daten erneut über die Patch-Funktion auf der Seite. Sie können sehen, dass nur die zweite und dritte LI aktualisiert werden und die erste LI nicht erneut gerendert wird, da sie sich nicht geändert hat.

Der Kern des Vorlagenparsens und -renderings in Vue besteht darin, die Vorlage zunächst über Funktionen zu analysieren, die Snabbdoms h() und patch() in vnode ähneln Wenn es sich um das erste Rendering handelt, wird der Vnode über patch(container,vnode) auf der Seite gerendert. Wenn es sich um das zweite Rendering handelt, wird über patch(vnode,newVnode) zunächst der Unterschied zwischen dem ursprünglichen Vnode und dem neuenVnode verglichen Diff-Algorithmus zum erneuten Rendern der Seite mit minimalem Aufwand.

Empfohlene verwandte Artikel:

Das Objekt von Diff ist Virtual Dom

Das obige ist der detaillierte Inhalt vonWas ist Vue Virtual DOM? Nutzung des virtuellen DOM von vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!