Heim >Web-Frontend >js-Tutorial >Detailliertes Code-Erklärungsbeispiel für die Rolle des Schlüssels in Vue
Detailliertes Code-Erklärungsbeispiel für die Rolle des Schlüssels in Vue
- coldplay.xixinach vorne
- 2020-07-11 17:43:282454Durchsuche
Die Rolle des Schlüssels in Vue
key Das spezielle attribute wird hauptsächlich im virtuellen Vue-Algorithmus von DOM verwendet, um Nodes beim Vergleich von Alt und Neu VNodes zu identifizieren. Wenn key nicht verwendet wird, verwendet Vue einen Algorithmus, der dynamische Elemente minimiert und versucht, Elemente desselben Typs so weit wie möglich an Ort und Stelle zu ändern und wiederzuverwenden. Bei Verwendung von key wird ein Algorithmus verwendet, der darauf basiert key. Änderungen ordnen die Reihenfolge der Elemente neu und entfernen key Elemente, die nicht vorhanden sind. Darüber hinaus müssen untergeordnete Elemente mit demselben übergeordneten Element ein eindeutiges key haben, was zu Darstellungsfehlern führt. key
Verwandte Lernempfehlungen:
Beschreibung
Die erste ist die Beschreibung der offiziellen Dokumentation. Wenn die mit Vue gerenderte Elementliste aktualisiert, wird standardmäßig die In-Place-Aktualisierungsstrategie verwendet. Wenn die Reihenfolge der Datenelemente geändert wird, wird v-for dies tun Verschieben Sie Vue-Elemente nicht, um sie an die Reihenfolge der Datenelemente anzupassen, sondern aktualisieren Sie stattdessen jedes Element an seinem Platz und stellen Sie sicher, dass es an jeder Indexposition korrekt gerendert wird. Dieser Standardmodus ist effizient, eignet sich jedoch nur für Listenwiedergabeausgaben, die nicht auf dem Status der untergeordneten Komponente oder dem temporären DOM-Status basieren, z. B. Formulareingabewerte. Um DOM einen Hinweis zu geben, damit die Identität jedes Knotens verfolgt und somit vorhandene Elemente wiederverwendet und neu angeordnet werden können, müssen Sie für jedes Element ein eindeutiges Vue angeben. Es wird empfohlen, bei der Verwendung key attribute wann immer möglich 🎜>, es sei denn, das Durchlaufen des Ausgabeinhalts v-for ist sehr einfach oder Sie verlassen sich bewusst auf das Standardverhalten, um Leistungsverbesserungen zu erzielen. key attributeDOM Einfach ausgedrückt: Wenn Sie
verwenden, um jedem Knoten eine eindeutige Kennung zu geben. Der key-Algorithmus kann diesen Knoten korrekt identifizieren und den richtigen Betrieb direkt durchführen Knoten an der Position und Wiederverwendung von Elementen so weit wie möglich. Die Rolle von key besteht hauptsächlich darin, virtuelle diff effizient zu aktualisieren. Darüber hinaus wird die Verwendung von key als DOM nicht empfohlen. Dadurch kann nur sichergestellt werden, dass index die Aktualisierung von Komponenten erzwingt, wenn sich Daten ändern, um Nebenwirkungen durch die direkte Wiederverwendung zu vermeiden. Die maximale Anzahl kann jedoch nicht garantiert werden Die Wiederverwendung von key als Vue hat grundsätzlich den gleichen Effekt bei der Datenaktualisierung wie die Nichtverwendung von index. keykey
BeispielDefinieren Sie zunächst eine
-Instanz, rendern Sie vier Listen, nämlich einfache Liste und komplexe Liste, und führen Sie sie jeweils durch Geschwindigkeit der Aktualisierung und Darstellung von und nicht mit Vue, dieser Test verwendet key. Jedes Mal, wenn der Code in key ausgeführt wird, wird die Schnittstelle zuerst aktualisiert und neu geladen, um den Browser und Chrome 81.0 zu vermeiden Die Auswirkungen der Selbstoptimierung. Console
<!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>Vue
Einfache ListeIm Fall einer einfachen Liste ist es möglicherweise besser,
nicht zu verwenden als. Das Rendering Die Geschwindigkeit beim Aktualisieren ist schneller, was in der offiziellen Dokumentation erwähnt wird, es sei denn, das Durchlaufen des Ausgabeinhalts key ist sehr einfach oder man verlässt sich bewusst auf das Standardverhalten, um Leistungsverbesserungen zu erzielen. Im folgenden Beispiel können Sie sehen, dass die Rendering-Geschwindigkeit schneller ist, wenn die Liste ohne key aktualisiert wird. Wenn kein DOM vorhanden ist, wird die Liste direkt an Ort und Stelle wiederverwendet und die Position der ursprünglichen Knoten bleibt unverändert. , verwenden Sie vorhandene Elemente wieder, aktualisieren Sie den Inhalt auf key, key, 5, 6, 7, 8 und fügen Sie zwei Knoten 9 und 10 sowie Wann vorhanden ist, werden die ursprünglichen Knoten 11, 12, key und 1 gelöscht, die Knoten 2 und 3 bleiben erhalten und die Knoten 4, 5 sind sechs Knoten 6, 7, 8 und 9 Da das Hinzufügen und Löschen von 10 zeitaufwändig ist, geht es ohne 11 schneller. 12
// 没有key的情况下 console.time(); vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12]; vm.$nextTick(() => console.timeEnd()); // default: 2.193056640625msrrree
DOMDie Wiederverwendung an Ort und Stelle kann einige Nebenwirkungen mit sich bringen. Das Dokument erwähnt, dass der Standardmodus der Wiederverwendung an Ort und Stelle effizient ist, aber nur für Dinge geeignet ist, die nicht auf dem Unterkomponentenstatus oder dem temporären key-Status basieren . Listen Sie die Rendering-Ausgabe auf, z. B. Formulareingabewerte.
在不设置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.016064453125msDas obige ist der detaillierte Inhalt vonDetailliertes Code-Erklärungsbeispiel für die Rolle des Schlüssels in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!