Une brève analyse des raisons pour lesquelles Vue ne peut pas utiliser l'index comme identifiant unique

vuePourquoi ne pouvons-nous pas utiliser l'index comme identifiant unique ? L'article suivant vous présentera les raisons pour lesquelles Vue ne peut pas utiliser l'index comme identifiant unique. J'espère que cela vous sera utile !

Cela implique le fonctionnement DOM de js natif et l'optimisation apportée par le DOM virtuel. Ce qui suit est divisé en deux parties pour discuter du

• DOM virtuel
• Pourquoi ne pouvez-vous pas utiliser l'index comme clé [Recommandation associée. : Tutoriel vidéo vuejs】

1. Virtual DOM

Voyons d'abord la façon de faire fonctionner les nœuds dom de manière native, mais la réponse du navigateur aux opérations DOM est très consommatrice d'énergie, car les modifications apportées aux nœuds entraîneront le navigateur pour réorganiser et redessiner Opération (veuillez vous référer à Le processus de rendu de la page dans le navigateur)

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document</title>



    <div>
        <ul></ul>
    </div>
    <script>
        let ul = document.querySelector(&#39;ul&#39;)
        for (let i = 0; i < 3; i++) {
            let li = document.createElement(&#39;li&#39;)
            li.innerHTML = i + 1
            ul.appendChild(li)
        }
    </script>

De plus, de nombreux éléments changeant dynamiquement du code js entraînent une réorganisation du navigateur et la consommation d'énergie peut être imaginé. Si certains nœuds changent, le réarrangement local des nœuds modifiés ne permettrait-il pas d'économiser beaucoup de performances ? ? ? Le dom virtuel introduit par vue utilise cette méthode. Ce qui suit est un morceau de code vue

nbsp;html>



    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>



    <div>
        <ul>
            <item></item>
        </ul>
        <button>change</button>
    </div>

    <script>
        new Vue({
            el: &#39;#app&#39;,
            data() {
                return {
                    list: [1, 2, 3]
                }
            },
            methods: {
                change() {
                    this.list.reverse()
                }
            },
            components: {
                item: {
                    props: [&#39;num&#39;],
                    template: `
            <div>
              {{num}}  
            
          `,
                    name: &#39;child&#39;
                }
            }
        })
    </script>

Lorsque vous cliquez sur le bouton de modification

Si le js natif effectue une telle opération, ce sera inévitablement le cas. réorganisé, mais la page Ce n'est qu'un changement partiel, mais Vue a considérablement économisé la consommation d'énergie après l'introduction du DOM virtuel

Alors, qu'est-ce que le DOM virtuel ?

Dans vue, vous pouvez obtenir une arborescence de nœuds virtuels avant d'exécuter la fonction de rendu, et vous pouvez utiliser l'arborescence de nœuds virtuels pour restituer la page. Lorsque le nœud dom de la page change dynamiquement, avant le rendu, le nœud virtuel nouvellement généré sera comparé au dernier nœud virtuel généré, et seules les différentes parties seront rendues. Chaque nœud virtuel est un objet décrivant les caractéristiques d'une couche de conteneurs. . Ce qui suit est l'arborescence des nœuds virtuels avant de cliquer sur le bouton Modifier dans le code de vue

vndoe = {
    tag: 'ul',
    children: [
        { tag: 'li',key:0, children: [{ vnode: { text: '3' } }] },
        { tag: 'li',key:1, children: [{ vnode: { text: '2' } }] },
        { tag: 'li',key:2, children: [{ vnode: { text: '1' } }] }

    ]
}复制代码

Lorsque vous cliquez sur Modifier, une nouvelle arborescence de nœuds virtuels sera générée et comparée à celle-ci

Après comparaison, seul le. différents endroits sont rendus

Alors, comment trouver la différence entre le nombre de deux nœuds virtuels ? Cela implique l'algorithme diff du code source de la vue

Une fois le cycle de vie monté, tant que la source de données change, le rappel de l'observateur observateur sera déclenché pour piloter la mise à jour de la vue. vm._update(v_rander())
_update générera un vnode vers _patch_ pour trouver la différence
Ce qui est démarré dans _patch_ est l'algorithme de comparaison

la clé est l'identifiant unique afin de rendre l'algorithme de comparaison plus précis dans la recherche des deux nœuds qui doivent être comparés

2. Alors pourquoi ne pouvons-nous pas utiliser l'index comme clé

Regardons le code précédent dans l'algorithme de comparaison, la clé est l'identifiant unique lorsque deux arbres de nœuds virtuels sont. par rapport, la même valeur de clé sera trouvée. Par comparaison, il s'avère que la valeur de clé est la même mais que les données à l'intérieur sont différentes. L'algorithme de diff déterminera qu'elle a changé et la restituera simplement. a changé la position. Lorsque nous y ajoutons un identifiant unique

nbsp;html>    <meta>    <meta>    <meta>    <script></script>    <title>Document</title>    <div>        <ul>            <item></item>        </ul>        <button>change</button>    </div>    <script>        new Vue({            el: &#39;#app&#39;,            data() {                return {                    list: [{                        n: 1,                        id: 0
                    }, {                        n: 2,                        id: 1
                    }, {                        n: 3,                        id: 2
                    }, ]
                }
            },            methods: {                change() {                    this.list.reverse()
                }
            },            components: {                item: {                    props: [&#39;num&#39;],                    template: `
            <div>
              {{num}}  
            
          `,                    name: &#39;child&#39;
                }
            }
        })  </script>复制代码

cliquez sur Comparaison de l'arborescence des nœuds virtuels après le changement

Lorsque l'algorithme de comparaison trouve la même valeur de clé pour la comparaison et constate que la clé la valeur est la même mais les données à l'intérieur sont également les mêmes, elles ne seront pas restituées, mais changeront considérablement leurs positions. Cela économise la consommation du navigateur, donc l'utilisation de l'index comme clé entraînera l'échec de l'optimisation dans diff (réduisant la réutilisabilité et violant la intention originale du Dom virtuel)

Les inconvénients de la suppression de l'index de données en tant que clé sont encore plus évidents

nbsp;html>    <meta>    <meta>    <meta>    <script></script>    <title>Document</title>    <div>        <ul>            <li>                <item></item>            </li>        </ul>        <button>del</button>    </div>    <script>        new Vue({            el: &#39;#app&#39;,            data() {                return {                    list: [1, 2, 3]
                }
            },            methods: {                del() {                    this.list.splice(0, 1)
                }
            },            components: {                item: {                    template: &#39;<div>{{Math.random()}}&#39;
                }
            }
        })    </script>复制代码

Après avoir cliqué sur le bouton Supprimer

Nous avons constaté qu'il avait effectivement supprimé le dernier élément, car après la suppression des données, en raison des caractéristiques du tableau, l'indice d'indice et la clé des données restantes passeront à -1, c'est-à-dire que la seconde, trois clés de données seront passe de 1, 2 à 0,1, l'algorithme de comparaison pensera que le contenu des données de la clé 0,1 a changé et que le contenu de la clé 3 a été supprimé, il restituera donc les première et deuxième données et supprimera les troisièmes données, mais en fait nous avons supprimé les troisièmes données. Un contenu, le deuxième et le troisième sont les changements de valeur clés. Vue ne comparera pas en profondeur le contenu textuel des sous-composants. Il ne peut détecter les changements que dans la couche externe des objets. Utilisez la clé pour comparer. Si la clé n'est pas unique, elle fonctionnera de manière incorrecte dans l'arborescence DOM virtuelle et s'affichera de manière incorrecte.

(Partage de vidéos d'apprentissage :

développement web front-end, vidéo sur les bases de la programmation)

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!