Quelle est la clé de vue-Questions et réponses frontales-php.cn

Dans vue, la clé est l'identifiant de l'objet DOM, un identifiant unique pour chaque vnode et une stratégie d'optimisation pour diff ; le nœud vnode correspondant peut être trouvé plus précisément et plus rapidement en fonction de la clé. Si les données sont uniquement destinées à l'affichage, vous pouvez utiliser index comme clé ; si vous utilisez index comme clé, les opérations ultérieures détruiront l'ordre, ce qui entraînera certainement des problèmes d'efficacité, et dans les cas graves, un mauvais DOM sera rendu.

Quelle est la clé de vue

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

1. Qu'est-ce que la clé

key est l'identifiant de l'objet DOM dans Vue ; la clé est l'identifiant unique de chaque vnode, et c'est aussi une stratégie d'optimisation pour les différences, qui peut être plus précise et plus rapide en fonction de la clé Recherchez le nœud vnode correspondant.
Lors de l'affichage d'une liste, la clé par défaut est index.
Si les données sont uniquement utilisées pour l'affichage, il n'y a aucun problème à utiliser l'index comme clé.
Si vous utilisez index comme clé et que les opérations ultérieures détruiront la commande, cela entraînera certainement des problèmes d'efficacité et, dans les cas graves, un mauvais DOM sera rendu. [Partage de vidéos d'apprentissage : tutoriel vidéo vue, vidéo web front-end]

Concernant la fonction et le principe de mise en œuvre de la clé, parlons-en un par un ci-dessous.

2. Le rôle de la clé

key est un logo et est utilisé dans Vue. Pour être plus précis, la clé est utilisée dans le DOM virtuel de Vue et n'apparaîtra pas dans le DOM réel.

2.1 Donnez un exemple

pour afficher un groupe d'informations personnelles sous forme de liste.

nbsp;html>


    <meta>
    <title>key的原理</title>

    <!--引入vue-->
    <script></script>
    

<div>
    <h2>人员列表</h2>
    <ul>
        <li>
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>

    <script>
        const vm = new Vue({
            el:&#39;#root&#39;,
            data:{
                persons:[
                    {&#39;id&#39;:&#39;001&#39;, &#39;name&#39;:&#39;张三&#39;,&#39;age&#39;:&#39;18&#39;},
                    {&#39;id&#39;:&#39;002&#39;, &#39;name&#39;:&#39;李四&#39;,&#39;age&#39;:&#39;19&#39;},
                    {&#39;id&#39;:&#39;003&#39;, &#39;name&#39;:&#39;王五&#39;,&#39;age&#39;:&#39;20&#39;}
                ]
            }
        })
    </script>

Copier après la connexion

Ce fichier html s'ouvre dans le navigateur comme indiqué ci-dessous.

Quelle est la clé de vue

La clé n'est pas utilisée dans l'exemple de fichier html ci-dessus, et il ne semble y avoir aucun problème. Bien entendu, il n'y aura aucun problème à simplement afficher des données sans écrire la clé. [Partage vidéo d'apprentissage : tutoriel vidéo vue, vidéo web front-end]

Maintenant, nous ajoutons une clé à l'exemple ci-dessus, ici l'identifiant de chaque élément de données est la clé

Copier après la connexion

{{p.name}}-{{p.age}}

Ajoutez les résultats d'affichage de la clé et les résultats dans l'image ci-dessus Exactement la même chose.

Quelle est la clé de vue

Et si nous visualisons l'élément sur le navigateur, nous ne verrons pas l'existence de la clé.

Quelle est la clé de vue

Jusqu'à présent, nous pouvons tirer deux conclusions : 1. Elle n'est utilisée que pour l'affichage des données, et il n'y a aucun impact si vous n'écrivez pas la clé ; 2. La clé n'apparaîtra pas dans le vrai DOM ;

En fait, même si sans écrire la clé, Vue utilise également la clé lors de la génération du vrai DOM. La valeur par défaut est l'index des données (index)

Nous remplaçons la clé par index, et les données affichées ne le seront pas. changer de quelque manière que ce soit.

Copier après la connexion

{{p.name}}-{{p.age}}

2.2 Modifier l'exemple ci-dessus

Affichez l'index sur la base de l'affichage des informations sur le personnel, et ajoutez un bouton dont la fonction est d'ajouter des informations sur le personnel dans l'en-tête

Modifiez légèrement le fichier html ci-dessus.

nbsp;html>


    <meta>
    <title>key的原理</title>

    <!--引入vue-->
    <script></script>
    <link>


<div>
    <h2>人员列表</h2>
    <button>添加一个老刘</button>
    <ul>
        <li>
            {{p.name}}-{{p.age}}-{{index}}
        </li>
    </ul>
</div>

    <script>
        const vm = new Vue({
            el:&#39;#root&#39;,
            data:{
                persons:[
                    {&#39;id&#39;:&#39;001&#39;, &#39;name&#39;:&#39;张三&#39;,&#39;age&#39;:&#39;18&#39;},
                    {&#39;id&#39;:&#39;002&#39;, &#39;name&#39;:&#39;李四&#39;,&#39;age&#39;:&#39;19&#39;},
                    {&#39;id&#39;:&#39;003&#39;, &#39;name&#39;:&#39;王五&#39;,&#39;age&#39;:&#39;20&#39;}
                ]
            },
            methods:{
                add(){
                    const p = {&#39;id&#39;:&#39;004&#39;, &#39;name&#39;:&#39;老刘&#39;,&#39;age&#39;:&#39;40&#39;}
                    this.persons.unshift(p)
                }
            }
        })
    </script>

Copier après la connexion

Nous pouvons voir que les index de Zhang San, Li Si et Wang Wu sont divisés respectivement en 0, 1, 2

Quelle est la clé de vue

Cliquez sur le bouton pour ajouter un nouveau personnage. À ce moment, l'index a changé. Le caractère nouvellement ajouté "Lao Liu" est passé à l'index 0, semble correct, mais semble également faux

Quelle est la clé de vue

Bien sûr, il n'y a aucun problème ici simplement à discuter des index. Voici un nouvel exemple pour expliquer où. le "faux" est

2.3 Modifiez à nouveau l'exemple

Au lieu d'afficher l'index, remplacez-le par une zone de saisie Écrivez le nom de famille de la personne dans la zone de saisie derrière chaque personne et observez les changements dans. les données originales après l'insertion des nouvelles données

Modifiez un peu le code HTML

Copier après la connexion

{{p.name}}-{{p.age}}

L'effet réel est comme l'image ci-dessous

Quelle est la clé de vue

Jusqu'ici, rien ne semble aller mal,La prochaine étape est d'être témoin le miracle

Ajoutez Lao Liu, quelque chose s'est mal passé, et c'était différent de ce à quoi nous nous attendions Pareil.

Quelle est la clé de vue

这是key为index的情况，如果修改为数据的唯一标识，则不会产生这样的问题。

Copier après la connexion

{{p.name}}-{{p.age}}

诶，这就是我们想要的。

Quelle est la clé de vue
列表内有输入内容，后续操作破坏了原始顺序，如果以index作为key，就会产生错误DOM

3. key的实现原理

要解释key的实现原理，就要引入Vue一个十分重要的概念——【虚拟DOM】。

给出一组数据，Vue要把这些数据渲染到页面上，首先要生成【虚拟DOM】，然后根据【虚拟DOM】去生成【真实的DOM】。如果数据发生了改变，Vue会生成【新的虚拟DOM】，注意，这个【新的虚拟DOM】并不会直接生成【新的真实DOM】，否则虚拟DOM一点用处也没有了。Vue的操作是，拿根据新的数据生成的【新的虚拟DOM】与之前的【真实的DOM】去做比较，如果相同，直接延用即可（“拿来主义”）；如果不同，则生成新的DOM对象。

在这个过程中key扮演了很重要的角色。

根据最后一个示例进行剖析。