Qu'est-ce que vue DOM virtuel ? Utilisation du DOM virtuel de vue

Le DOM virtuel de Vue utilise js pour simuler la structure du DOM Le contenu de cet article est de présenter aux amis qu'est-ce que le DOM virtuel de Vue ? En plus de l'utilisation du DOM virtuel de vue, examinons le contenu spécifique de l'article.

1. Pourquoi un DOM virtuel est nécessaire

Plus tôt, nous avons écrit un framework simple de type Vue à partir de zéro, dans lequel l'analyse et le rendu des modèles sont effectués via la fonction Compile , la fragmentation du document est utilisée au lieu d'exploiter directement les éléments DOM dans la page. Une fois les données modifiées, le vrai DOM est inséré dans la page via la fonction appendChild.

Bien que des fragments de documents soient utilisés, le vrai DOM est toujours exploité.

Nous savons que l'exploitation du DOM coûte cher, donc vue2.0 utilise le DOM virtuel pour remplacer le fonctionnement du DOM réel, et utilise enfin un mécanisme pour terminer la mise à jour du DOM réel et restituer la vue.

Le soi-disant DOM virtuel utilise en fait JS pour simuler la structure du DOM et place les opérations de changement du DOM sur la couche JS pour minimiser les opérations sur le DOM (je pense que c'est principalement car l'exploitation de JS est infiniment plus rapide que l'exploitation de DOM et JS est très efficace). Comparez ensuite les modifications dans le DOM virtuel deux fois avant et après, et seules les parties modifiées seront restituées, tandis que les parties inchangées ne seront pas restituées.

Par exemple, nous avons la structure DOM suivante.

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

Nous pouvons complètement utiliser des objets JS pour simuler la structure DOM ci-dessus, et après simulation, elle deviendra la structure suivante.

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

}

Il faut noter que la structure DOM simulée par JS ne simule pas les propriétés et méthodes sur tous les nœuds DOM (car le nœud DOM lui-même y Il existe de nombreux attributs, ce qui est également un point où les opérations DOM consomment des performances), mais seule une partie des attributs et méthodes liés aux opérations sur les données est simulée.

2. Utilisation du DOM virtuel vue

Vue a introduit vdom dans la version 2.0. Son vdom est basé sur les modifications apportées par la bibliothèque snabbdom. snabbdom est une bibliothèque vdom open source.

La fonction principale de snabbdom est de convertir la structure DOM simulée JS entrante en nœuds DOM virtuels.

Convertissez d'abord la structure DOM simulée JS en un DOM virtuel via la fonction h, puis convertissez le DOM virtuel en un DOM réel via la fonction patch et restituez-le dans la page.

Afin d'assurer le rendu minimum de la page, snabbdom introduit l'algorithme Diff, qui utilise l'algorithme Diff pour trouver la différence entre les deux DOM virtuels avant et après, et met à jour uniquement les nœuds DOM modifiés sans re -rendu des nœuds DOM modifiés.

Ici, je ne vais pas analyser le code source de snabbdom pour expliquer comment snabbdom fait cela (principalement parce qu'il n'est pas à ce niveau à ce stade, haha. De plus, de nombreux étudiants ont déjà fait une analyse similaire, pertinente les liens sont joints à la fin de l’article).

Je vais voir comment le DOM virtuel dans Vue complète le rendu des vues du point de vue de l'utilisation de snabbdom.

Jetons d'abord un coup d'œil aux fonctions des deux API principales de snabbdom.

• Fonction h() : Convertissez le modèle de structure DOM simulé JS entrant en vnode. (vnode est un pur objet JS) Fonction

• patch() : Rendre les nœuds DOM virtuels dans la page.

Nous fournissons un exemple pour voir la fonction réelle de 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>

Analyse d'idées :

• Nous créons d'abord un virtuel à travers l'h Le nœud DOM de fonction restitue le DOM virtuel à la page via la fonction patch.

• Lorsque vous cliquez sur le bouton btn, les données de la liste ul#list sont mises à jour, la valeur du deuxième élément li est modifiée et un nouvel élément li est ajouté, et la valeur du premier élément li est fusionné. Rien n'a changé. Nous rendons à nouveau les données mises à jour sur la page via la fonction patch. Vous pouvez voir que seuls les deuxième et troisième li sont mis à jour et que le premier li n'est pas restitué car il n'a pas changé.

Le cœur de l'analyse et du rendu des modèles dans vue est le suivant : analysez d'abord le modèle via des fonctions similaires à h() et patch() de snabbdom dans vnode . S'il s'agit du premier rendu, le vnode est rendu sur la page via patch(container,vnode). S'il s'agit du deuxième rendu, via patch(vnode,newVnode), comparez d'abord la différence entre le vnode d'origine et le newVnode via le. Algorithme Diff pour restituer la page avec un minimum d'effort.

Articles connexes recommandés :

L'objet du diff est le dom virtuel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!