Maison >interface Web >js tutoriel >Exemple d'explication détaillée du code du rôle de la clé dans Vue
Exemple d'explication détaillée du code du rôle de la clé dans Vue
- coldplay.xixiavant
- 2020-07-11 17:43:282435parcourir
Le rôle de la clé dans Vue
key Le attribute spécial est principalement utilisé dans l'algorithme virtuel Vue de DOM pour identifier Nodes lors de la comparaison de l'ancien et du nouveau VNodes. Si key n'est pas utilisé, Vue utilisera un algorithme qui minimise les éléments dynamiques et essaiera de modifier et de réutiliser autant que possible les éléments du même type en place. Lors de l'utilisation de key, il utilisera un algorithme basé sur. key. Les modifications réorganisent l'ordre des éléments et suppriment key les éléments qui n'existent pas. De plus, les éléments enfants avec le même élément parent doivent avoir un key unique. Dupliquer key provoquera des erreurs de rendu.
Recommandations d'apprentissage associées : Tutoriel vidéo javascript
Description
La première est la description de la documentation officielle. Lorsque Vue met à jour la liste d'éléments rendue à l'aide de v-for, il utilise la stratégie de mise à jour sur place par défaut. Si l'ordre des éléments de données est modifié, Vue le fera. ne déplacez pas les éléments DOM pour qu'ils correspondent à l'ordre des éléments de données, mais mettez à jour chaque élément en place et assurez-vous qu'ils s'affichent correctement à chaque position d'index. Ce mode par défaut est efficace, mais convient uniquement à la sortie de rendu de liste qui ne repose pas sur l'état du composant enfant ou sur l'état DOM temporaire, tel que les valeurs d'entrée de formulaire. Afin de donner à Vue un indice afin qu'il puisse garder une trace de l'identité de chaque nœud et ainsi réutiliser et réorganiser les éléments existants, vous devez fournir un key attribute unique pour chaque élément. Il est recommandé de fournir v-for autant que possible. 🎜>, à moins que le parcours du contenu de sortie key attribute soit très simple, ou que vous vous fiiez délibérément au comportement par défaut pour obtenir des améliorations de performances. DOM
dans une boucle de liste, vous devez utiliser key pour donner à chaque nœud un identifiant unique. L'algorithme key peut identifier correctement ce nœud et trouver le bon fonctionnement direct. nœuds à la position et réutiliser les éléments autant que possible. Le rôle principal de diff est de mettre à jour efficacement le key virtuel. De plus, l'utilisation de DOM comme index n'est pas recommandée. Cela peut uniquement garantir que key force la mise à jour des composants lorsque les données sont modifiées pour éviter les effets secondaires causés par la réutilisation sur place, mais cela ne peut pas garantir le nombre maximum de. Réutiliser les éléments, et utiliser Vue comme index a fondamentalement le même effet dans la mise à jour des données que ne pas utiliser key. key
Exemple
Définissez d'abord une instance, restituez quatre listes, à savoir une liste simple et une liste complexe, et portez-les respectivement. Comparaison des vitesse de mise à jour et de rendu de Vue et ne portant pas key, ce test utilise key A chaque fois que le code est exécuté dans Chrome 81.0, l'interface sera rafraîchie et rechargée en premier pour éviter le navigateur et Console. L’impact de l’auto-optimisation. Vue
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<p id="app">
<ul>
<li v-for="item in simpleListWithoutKey" >{{item}}</li>
</ul>
<ul>
<li v-for="item in simpleListWithKey" :key="item" >{{item}}</li>
</ul>
<ul>
<li v-for="item in complexListWithoutKey">
<span v-for="value in item.list" v-if="value > 5">{{value}}</span>
</li>
</ul>
<ul>
<li v-for="item in complexListWithKey" :key="item.id">
<span v-for="value in item.list" :key="value" v-if="value > 5">{{value}}</span>
</li>
</ul>
</p>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
simpleListWithoutKey: [1, 2, 3, 4, 5, 6],
simpleListWithKey: [1, 2, 3, 4, 5, 6],
complexListWithoutKey:[
{id: 1, list: [1, 2, 3]},
{id: 2, list: [4, 5, 6]},
{id: 3, list: [7, 8, 9]}
],
complexListWithKey:[
{id: 1, list: [1, 2, 3]},
{id: 2, list: [4, 5, 6]},
{id: 3, list: [7, 8, 9]}
],
}
})
</script>
</html>
Liste simple
Dans le cas d'une liste simple, ne pas utiliser peut être mieux que d'utiliser key Le rendu la vitesse de mise à jour est plus rapide, ce qui est mentionné dans la documentation officielle, à moins que parcourir le contenu de sortie key soit très simple, ou s'appuyer délibérément sur le comportement par défaut pour obtenir des améliorations de performances. Dans l'exemple ci-dessous, vous pouvez voir que la vitesse de rendu est plus rapide lorsque la liste est mise à jour sans DOM. Lorsqu'il n'y a pas de key, la liste est directement réutilisée sur place, et la position du nœud d'origine reste inchangée. , réutilisez les éléments en place, mettez à jour le contenu vers key, 5, 6, 7, 8, 9, et ajoutez deux nœuds 10 et 11, et Quand 12 existe, les nœuds key, 1, 2 et 3 d'origine sont supprimés, les nœuds 4 et 5 sont conservés et les 6, 7, il y en a six nœuds 8, 9, 10 et 11 Puisque l'ajout et la suppression de 12 prennent du temps, c'est plus rapide sans DOM. key
// 没有key的情况下 console.time(); vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12]; vm.$nextTick(() => console.timeEnd()); // default: 2.193056640625msrrreeLa réutilisation sur place peut entraîner des effets secondaires. Le document mentionne que le mode par défaut de réutilisation sur place est efficace, mais il ne convient qu'aux choses qui ne dépendent pas d'un état de sous-composant ou d'un état
temporaire. . Répertorie les résultats de rendu, tels que les valeurs d'entrée du formulaire. DOM
在不设置key的情况下，元素中没有与数据data绑定的部分，Vue会默认使用已经渲染的DOM，而绑定了数据data的部分会进行跟随数据渲染，假如操作了元素位置，则元素中未绑定data的部分会停留在原地，而绑定了data的部分会跟随操作进行移动，在下面的例子中首先需要将两个A之后的输入框添加数据信息，这样就制作了一个临时状态，如果此时点击下移按钮，那么不使用key的组中的输入框将不会跟随下移，且B到了顶端并成为了红色，而使用key的组中会将输入框进行下移，且A依旧是红色跟随下移。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>就地复用</title>
</head>
<body>
<p id="app">
<h3>采用就地复用策略(vuejs默认情况)</h3>
<p v-for='(p, i) in persons'>
<span>{{p.name}}<span>
<input type="text"/>
<button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
</p>
<h3>不采用就地复用策略(设置key)</h3>
<p v-for='(p, i) in persons' :key='p.id'>
<span>{{p.name}}<span>
<input type="text"/>
<button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
</p>
</p>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
},
mounted: function(){
// 此DOM操作将两个A的颜色设置为红色 主要是为了演示原地复用
document.querySelectorAll("h3 + p > span:first-child").forEach( v => v.style.color="red");
},
methods: {
down: function(i) {
if (i == this.persons.length - 1) return;
var listClone = this.persons.slice();
var one = listClone[i];
listClone[i] = listClone[i + 1];
listClone[i + 1] = one;
this.persons = listClone;
}
}
});
</script>
</body>
</html>
<!-- 源于 https://www.zhihu.com/question/61078310 @霸都丶傲天 有修改-->复杂列表
使用key不仅能够避免上述的原地复用的副作用，且在一些操作上可能能够提高渲染的效率，主要体现在重新排序的情况，包括在中间插入和删除节点的操作，在下面的例子中没有key的情况下重新排序会原地复用元素，
但是由于v-if绑定了data所以会一并进行操作，在这个DOM操作上比较消耗时间，而使用key得情况则直接复用元素，v-if控制的元素在初次渲染就已经决定，在本例中没有对其进行更新，所以不涉及v-if的DOM操作，所以在效率上会高一些。
console.time();
vm.complexListWithoutKey = [
{id: 3, list: [7, 8, 9]},
{id: 2, list: [4, 5, 6]},
{id: 1, list: [1, 2, 3]},
];
vm.$nextTick(() => console.timeEnd());
vm.$nextTick(() => console.timeEnd());
// default: 4.100244140625msconsole.time();
vm.complexListWithKey = [
{id: 3, list: [7, 8, 9]},
{id: 2, list: [4, 5, 6]},
{id: 1, list: [1, 2, 3]},
];
vm.$nextTick(() => console.timeEnd());
// default: 3.016064453125msCe 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!