Liste Rendering und Vue v-Richtlinie für

0
13

Liste rendering ist eine der am häufigsten verwendeten Verfahren in der front-end-web-Entwicklung. Dynamische Liste rendering wird oft verwendet, um eine Reihe von ähnlich gruppiert Informationen in einer übersichtlichen und freundlichen format an den Benutzer. In fast jeder web-Anwendung, die wir benutzen, können wir sehen, Listen von Inhalt in vielen Bereichen der app.

In diesem Artikel werden wir sammeln ein Verständnis von Vue v-Richtlinie bei der Erzeugung von dynamischen Listen, sowie gehen Sie durch einige Beispiele, warum der Schlüssel-Attribut sollte verwendet werden, wenn dies zu tun.

Da werden wir Dinge zu erklären gründlich, wenn wir anfangen, code zu schreiben, vorausgesetzt Sie haben keine oder nur sehr wenig Kenntnisse mit Vue (und/oder anderen JavaScript-frameworks).

Case Study:

Verwenden wir als case study für diesen Artikel.

Wenn Sie angemeldet sind und in der Haupt-index-route von uns präsentiert eine Ansicht ähnlich dieser:

Auf der homepage, wir haben uns gewöhnt, um zu sehen, eine Liste der trends, eine Liste von tweets, eine Liste mit potenziellen Nachfolgern, etc. Der Inhalt dieser Listen hängt von einer Vielzahl von Faktoren—unsere Geschichte, der wir Folgen, unsere Vorlieben, etc. Als Ergebnis können wir sagen, dass alle diese Daten dynamisch ist.

Wenn diese Daten dynamisch zu erhalten, die Art, wie diese Daten angezeigt, die gleiche bleibt. Dies ist zum Teil durch die Verwendung von wieder verwendbaren web-Komponenten.

Zum Beispiel; wir können sehen, die Liste der tweets, die als Liste von einzelnen tweet-Komponenten-Elemente. Wir können uns denken, der tweet-Komponente, wie eine Muschel, nimmt die Daten von Arten, wie den Benutzernamen, Griff, tweet und avatar, unter anderem Stücke, und das zeigt einfach diese Teile in eine einheitliche markup.

Sagen wir, wir wollten die Wiedergabe einer Liste von Komponenten (z.B. eine Liste von tweet-Komponenten-Elemente) basiert auf einer großen Daten-Quelle, die aus einem server. In Vue, das erste, was in den Sinn kommen sollte, um dies zu erreichen, ist die v- Richtlinie.

Die v-Richtlinie

Die v-Richtlinie wird verwendet, um die Wiedergabe einer Liste von Elementen basierend auf einer Datenquelle. Die Richtlinie kann verwendet werden, auf einem template-element und erfordert eine spezielle syntax, die entlang der Linien von:

Lassen Sie uns sehen Sie ein Beispiel, wie dies in der Praxis. Zunächst nehmen wir an, dass wir bereits über eine Sammlung von tweet-Daten:

const tweets = [
{
id: 1,
Namen: ‘James’,
Griff: ‘@jokerjames’,
img: ‘https://semantic-ui.com/images/avatar2/large/matthew.png’,
tweet: “Wenn Sie nicht erfolgreich sind, Staub selbst aus und versuchen Sie es erneut.”,
Vorlieben: 10,
},
{
id: 2,
name: ‘Fatima’,
Griff: ‘@fantasticfatima’,
img: ‘https://semantic-ui.com/images/avatar2/large/molly.png’,
tweet: ‘Besser spät als nie, aber nie zu spät ist besser.’,
Vorlieben: 12,
},
{
id: 3,
name: ‘Xin’,
Griff: ‘@xeroxin’,
img: ‘https://semantic-ui.com/images/avatar2/large/elyse.png’,
tweet: “Schönheit im Kampf, Hässlichkeit in den Erfolg.’,
Vorlieben: 18,
}
]

tweets ist eine Sammlung von tweet-Objekten, die mit jedem tweet mit details zum jeweiligen tweet—ein eindeutiger Bezeichner, der name/handle auf das Konto, tweet-Nachricht, etc. Lassen Sie uns nun versuchen, die v-Richtlinie für die Darstellung einer Liste von tweet-Komponenten basiert auf diesen Daten.

In Erster Linie erstellen wir die Vue-Instanz, die das Herz des Vue Anwendung. Wir montieren/befestigen unserem Beispiel ein DOM-element mit der id app und weisen Sie die tweets, die Sammlung als Teil der Instanz-Daten-Objekt.

neue Vue({
el: ‘#app’,
Daten: {
tweets
}
});

Wir werden jetzt gehen Sie vor und erstellen Sie einen tweet-Komponente, die unsere v-für Richtlinie verwenden, um die Wiedergabe einer Liste. Wir werden die globalen Vue.Komponente Konstruktor zum erstellen einer Komponente mit dem Namen tweet-Komponente:

Vue.Komponente(‘tweet-Komponente’, {
Vorlage: `
<div class=”tweet”>
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image-64×64″>
<img :src=”tweet.img” alt=”Bild”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<strong>{{tweet.name}}</strong> <small>{{tweet.handle}}</small>
<br>
{{tweet.tweet}}
</p>
</div>
<div class=”level-Links”>
<a class=”level-item”>
<span class=”icon-small”><i class=”fas fa-heart”></i></span>
<span class=”likes”>{{tweet.mag}}</span>
</a>
</div>
</div>
</article>
</div>
</div>
`,
Requisiten: {
tweet: Objekt
}
});

Ein paar interessante Dinge hier zu beachten.

  1. Die tweet-Komponente erwartet ein tweet-Objekt-prop wie in der prop-Validierung erforderlich (Requisiten: {tweet: Object}). Wenn die Komponente gerendert wird mit einem tweet prop, ist nicht ein Objekt, Vue wird Warnungen ausgeben.
  2. Wir sind verbindlich, die Eigenschaften der tweet-Objekt prop auf die Komponente, die Vorlage mit Hilfe der Schnurrbart syntax: {{ }}.
  3. Die markup-Komponente passt sich Bulma ‘ s Box-element, wie es ist eine gute ähnlichkeit mit einem tweet.

In der HTML-Vorlage, die wir brauchen, um das markup, wo unsere Vue-app bereitgestellt wird (D. H. das element mit der id der app). Innerhalb dieses markup verwenden wir die v-Richtlinie für die Darstellung einer Liste von tweets. Da tweets ist die Daten-Sammlung, wir werden Durchlaufen, tweet werden einen entsprechenden alias zu verwenden, die in der Richtlinie. In jedem gerendert tweet-Komponente, werden wir auch in der iterierten tweet-Objekt als Requisiten, um es auf die Komponente.

<div id=”app” class=”Spalten”>
<div class=”Spalte”>
<tweet-Komponente v-=”tweet-in tweets” :tweet=”tweet”/>
</div>
</div>

Unabhängig davon, wie viele weitere tweet-Objekten eingeführt werden würde, um die Sammlung, oder wie werden Sie im Laufe der Zeit ändern—unser set-up wird immer machen alle tweets in der Sammlung in der gleichen markup, das wir erwarten.

Mit der Hilfe von einigen benutzerdefinierten CSS, die unsere app wird in etwa so Aussehen:

Finden Sie den Stift Einfach Feed #1 von Dj Hassan (@itslit) auf CodePen.

Wenn alles wie erwartet funktioniert, können wir aufgefordert werden, mit einem Vue-Tipp in unserem browser-Konsole:

[Vue-Tipp]: <tweet-Komponente v-=”tweet-in tweets”>: Komponente Listen gerendert mit v-explizit-Tasten…

Sie sind möglicherweise nicht in der Lage zu sehen, die Warnung in der browser-Konsole beim ausführen des Codes durch CodePen.

Warum ist Vue erzählen Sie uns angeben, explizite Schlüssel in unsere Liste ein, wenn alles wie erwartet funktioniert?

Schlüssel

Es ist gängige Praxis, geben Sie die Schlüssel-Attribut für jedes element iteriert in einer gerenderten v-Liste. Dies ist, weil die Vue verwendet die Schlüssel-Attribut zu erstellen, die einzigartige Bindungen, die für jeden Knoten die Identität.

Lassen Sie uns erklären dies einige mehr—, wenn es eine dynamische UI-änderungen unserer Liste (z.B. Reihenfolge der Listenelemente wird gemischt), Vue, entscheiden Richtung der änderung von Daten in jedem element, anstatt sich die DOM-Elemente entsprechend. Dies ist nicht ein Problem in den meisten Fällen. Jedoch, in bestimmten Fällen, in denen unsere v-Liste hängt davon ab, DOM-Staat und/oder Kind Komponente Zustand, dies kann dazu führen, dass einige unerwünschte Verhalten.

Mal sehen, ein Beispiel dafür. Was ist, wenn unsere einfachen tweet Komponente enthalten ein input-Feld, das dem Benutzer zu ermöglichen, direkt Antworten auf die tweet-Nachricht ein? Ignorieren wir, wie diese Antwort eingereicht werden könnten und einfach die Adresse der neuen input-Feld selbst:

Wir werden dieses neue input-Feld auf der Vorlage des tweet-Komponente:

Vue.Komponente(‘tweet-Komponente’, {
Vorlage: `
<div class=”tweet”>
<div class=”box”>
// …
</div>
<div class=”control-hat-Symbole-Links-icons-rechts”>
<input class=”input-small” placeholder=”Tweet Ihre Antwort…” />
<span class=”icon-small-left”>
<i class=”fas fa-envelope”></i>
</span>
</div>
</div>
`,
Requisiten: {
tweet: Objekt
}
});

Übernehmen wir einführen wollte ein weiteres neues feature in unserer app. Dieses Merkmal würde dem Benutzer ermöglicht, shuffle eine Liste von tweets zufällig.

Um dies zu tun, können wir erst einen “Shuffle!” – button in unserer HTML-Vorlage:

<div id=”app” class=”Spalten”>
<div class=”Spalte”>
<button class=”is-primary button” @click=”shuffle”>Shuffle!</- Taste>
<tweet-Komponente v-=”tweet-in tweets” :tweet=”tweet”/>
</div>
</div>

Wir haben schonmal ein click-Ereignis-listener auf dem button-element zu nennen, eine shuffle-Methode, die, wenn Sie ausgelöst werden. In unserem Vue-Instanz; wir erstellen werden, wird die shuffle-Methode verantwortlich, zufällig mischen der tweets-Sammlung in der Instanz. Wir verwenden lodash ist _shuffle Methode, dies zu erreichen:

neue Vue({
el: ‘#app’,
Daten: {
tweets
},
Methoden: {
shuffle() {
diese.tweets = _.shuffle(dies.tweets)
}
}
});

Probieren Sie es aus! Wenn wir auf shuffle ein paar mal, merken wir, unseren tweet-Elemente kommen zufällig sortiert, die mit jedem Klick.

Finden Sie den Stift Einfach Feed #2 von Dj Hassan (@itslit) auf CodePen.

Jedoch, wenn wir einige Informationen in die Eingabe der einzelnen Komponenten klicken Sie dann auf shuffle, merken wir, etwas eigenartiges passiert:

Da wir noch nicht entschieden, mit dem key – Attribut, Vue noch nicht erstellt einzigartige Bindungen zu jedem tweet Knoten. Als Ergebnis, wenn wir sind mit dem Ziel neu zu ordnen, tweets, Vue nimmt die performant speichern Ansatz einfach ändern (oder patch -) Daten in jedem element. Da die temporäre DOM-state (d.h. der eingegebene text) an Ort und Stelle bleibt, erleben wir das zufällige mismatch.

Hier ist ein Diagramm, das zeigt uns die Daten, die bekommt gepatcht, die auf jedes element und das DOM-Staat, der an Ort und Stelle bleibt:

Um dies zu vermeiden; wir müssen vergeben Sie einen eindeutigen Schlüssel für jeden tweet-Komponente gerendert in der Liste. Wir verwenden die id von einem tweet zu den eindeutigen Bezeichner, da sollten wir sicher sagen, dass ein tweet-id sollte nicht gleich der anderen. Denn wir arbeiten mit dynamische Werte verwenden wir die v-bind-Richtlinie zum binden unser Schlüssel zum tweet.id:

<div id=”app” class=”Spalten”>
<div class=”Spalte”>
<button class=”is-primary button” @click=”shuffle”>Shuffle!</- Taste>
<tweet-Komponente v-=”tweet-in tweets” :tweet=”tweet” :key=”tweet.id” />
</div>
</div>

Nun, Vue erkennt jeder tweet Knoten-Identität; und so wird die Reihenfolge der Komponenten, wenn wir beabsichtigen, über das mischen der Liste.

Da jeder tweet Komponente wird nun entsprechend verschoben, wir können noch einen Schritt weiter und verwenden Vue transition-Gruppe, um zu zeigen, wie die Elemente neu geordnet werden.

Um dies zu tun, fügen wir die transition-Gruppe-element als wrapper, um die v-Liste. Wir werden angeben, einen übergang Namen von tweets und erklären, dass die transition-Gruppe dargestellt werden soll, wie ein div-element.

<div id=”app” class=”Spalten”>
<div class=”Spalte”>
<button class=”is-primary button” @click=”shuffle”>Shuffle!</- Taste>
<transition-group name=”tweets” tag=”div”>
<tweet-Komponente v-=”tweet-in tweets” :tweet=”tweet” :key=”tweet.id” />
</transition-Gruppe>
</div>
</div>

Basierend auf dem Namen der transition, Vue erkennt automatisch, wenn alle CSS-übergänge/ – Animationen, die angegeben wurden. Da wollen wir aufrufen, dass ein übergang für die Bewegung der Elemente in der Liste; Vue Aussehen wird für einen bestimmten CSS-übergang entlang der Linien von tweets verschieben (wo tweets ist der name gegeben, um unsere transition-Gruppe). Als Ergebnis, werden wir manuell einführen .tweets-bewegen-Klasse mit einer angegebenen Art und dem Zeitpunkt des übergangs:

#app .tweets-bewegen {
transition: transform 1s;
}

Dies ist ein sehr kurzer Einblick in die Anwendung der Liste der übergänge. Werden Sie sicher, dass Sie die Vue-Dokumentation für detaillierte Informationen über die verschiedenen Arten von übergängen, die angewendet werden können!

Unser tweet-Komponente Elemente werden nun den übergang angemessen zwischen den Standorten, wenn ein shuffle aufgerufen. Probieren Sie es aus! Geben Sie einige Informationen in die Eingabefelder ein und klicken Sie auf “Shuffle!” ein paar mal.

Finden Sie den Stift Einfach Feed #3 von Dj Hassan (@itslit) auf CodePen.

Ziemlich cool, Recht? Ohne den Schlüssel-Attribut der transition-group-element kann nicht verwendet werden, um erstellen Sie eine Liste mit übergängen , da die Elemente gepatcht sind im Ort statt neu geordnet werden.

Sollte das key-Attribut immer verwendet werden? Es wird empfohlen. Die Vue docs angeben, dass der Schlüssel-Attribut sollte nur verzichtet werden, wenn:

  • Wir haben bewusst die Standard-Art der Korrektur der Elemente aus performance-Gründen.
  • Die DOM-Inhalte ist einfach genug.

Fazit

Und da haben wir es! Hoffentlich dieser kurze Artikel wird dargestellt, wie sinnvoll die v-Richtlinie ist so gut wie ein wenig mehr Kontext, warum das key-Attribut wird Häufig verwendet. Lassen Sie mich wissen, wenn Sie irgendwelche Fragen/Gedanken auch immer!

Wenn Sie mochte meinen Schreibstil und sind potenziell interessiert an lernen, wie man apps erstellen mit Vue.js Sie können, wie das Buch Fullstack Vue: The Complete Guide to Vue.js ich half veröffentlichen! Das Buch umfasst zahlreiche Facetten, Vue, einschließlich, aber nicht beschränkt auf routing, einfache state-management, Formular-handling, Vuex -, server-Persistenz, und testen. Wenn Sie interessiert sind, weitere Informationen erhalten Sie von unserer website, https://fullstack.io/vue.