Methoden Berechnet, und die Beobachter in Vue.js

0
20

Einer der Gründe, warum ich Liebe die Arbeit mit Vue ist, weil, wie nützliche Methoden, berechnet, und Beobachter sind, und die Lesbarkeit Ihrer Unterscheidung. Bis Verständnis alle drei, es ist schwierig zu nutzen, die Funktionen von Vue zu seinem vollen potential. Noch ist die Mehrheit der Menschen sehe ich, verwirrt über dieses Rahmens tendenziell auch verwirrt über die Unterschiede, so lassen Sie uns zum eingraben.

Im Fall benötigen Sie eine schnelle Antwort und habe keine Zeit zum Lesen des gesamten Artikels, hier ein kleines TL;DR:

  • Methoden: Diese sind genau das, was Sie klingen wie Sie könnten (yay, Namensgebung!). Sie sind Funktionen, hängen von einem Objekt—in der Regel die Vue-Instanz selbst oder eine Vue-Komponente.
  • Berechnet: Diese Eigenschaften können auf den ersten Blick wie würden Sie verwendet werden, wie eine Methode, aber nicht sind. In Vue verwenden wir Daten zum nachverfolgen von änderungen an einer bestimmten Eigenschaft, die wir sein möchten reaktiv. Berechnete Eigenschaften, die uns erlauben, zu definieren, eine Eigenschaft, die verwendet wird, genauso wie Daten, sondern kann auch eigene Logik, die zwischengespeichert wird, basierend auf seiner Abhängigkeiten. Sie können prüfen, berechneten Eigenschaften andere Einblick in Ihre Daten.
  • Watchers: Diese erlauben Ihnen einen Einblick in die Reaktivität system. Wir sind ein paar Haken, mit denen zu beobachten, die alle Eigenschaften gespeichert sind, die von Vue. Wenn wir wollen, um ein bisschen die Funktionalität jedes mal, wenn sich etwas ändert, oder reagieren auf eine bestimmte änderung, konnten wir beobachten, eine Eigenschaft und gelten einige Logik. Dies bedeutet, dass der name des watcher ist zu entsprechen, was wir versuchen zu beobachten.

Wenn einer das klingt verwirrend, keine Sorge! Wir Tauchen weiter unten und hoffentlich-Adresse Verwechslungen. Wenn Sie vertraut sind mit vanilla-JavaScript bereits, Methoden kann ziemlich offensichtlich, um Sie, abgesehen von einem oder zwei Vorbehalte. Es könnte dann gut beraten, Sie (ich Liebe diesen Satz) zu überspringen, um die Berechnete und Watchers Abschnitte.

Methoden

Methoden sind wahrscheinlich etwas, das Sie verwenden, eine Menge während der Arbeit mit Vue. Sie sind treffend benannt, im wesentlichen, wir hängen eine Funktion aus einem Objekt. Sie sind unglaublich nützlich für den Anschluss von Funktionalität zu den Richtlinien für Veranstaltungen, oder auch nur ein kleines bisschen Logik wiederverwendet werden wie jede andere Funktion. Sie können den Aufruf einer Methode innerhalb einer anderen Methode, zum Beispiel. Sie können auch rufen eine Methode in ein lifecycle-Haken. Sie sind sehr vielseitig.

Hier ist eine einfache demo zu demonstrieren:

Finden Sie die Pen Slim Beispiel für die Methoden von Sarah Drasner (@sdras) auf CodePen.

<code class=”language-css”><div id=”app”>
<- Taste @click=”tryme”>Try Me</button>
<p>{{ message }}</p>
</div>
neue Vue({
el: ‘#app’,
Daten() {
return {
Nachricht: null
}
},
Methoden: {
tryme() {
diese.message = Datum()
}
}
})

Wir hätten auch ausgeführt, die Logik in der Richtlinie selbst wie <button @click=”message = Datum()”>Try Me</button>, das funktioniert sehr gut für dieses kleine Beispiel. Da jedoch die Komplexität der Anwendung wächst, es häufiger zu tun, wie wir oben sehen, brechen Sie aus, halten Sie Sie lesbar. Es gibt auch eine Grenze der Logik, Vue wird Ihnen erlauben, zu äußern, in eine Richtlinie—zum Beispiel-Ausdrücke sind erlaubt aber die Aussagen nicht.

Sie können feststellen, dass wir in der Lage sein, den Zugang zu dieser Methode innerhalb, Komponente oder Vue Instanz, und wir können rufen jedes Stück unsere Daten hier in diesem Fall.Nachricht. Sie haben nicht nennen Sie eine Methode, wie Sie möchten rufen Sie eine Funktion innerhalb einer Richtlinie. Zum Beispiel, @click=”methodName()” ist überflüssig. Sie können die Referenz-es mit @click=”methodName”, es sei denn, Sie übergeben einen parameter, wie @click=”methodName(param)”.

Direktiven verwenden, um Methoden aufzurufen ist auch schön, denn wir haben einige vorhandene Modifikatoren. Ein Beispiel, das sehr nützlich ist .verhindern, die halten ein submit-Ereignis vom Neuladen der Seite, wie diese:

<form v-an:senden.verhindern=” “onSubmit” “></form>

Es gibt viele mehr, hier sind nur ein paar.

Berechnet

Berechnete Eigenschaften sind sehr wertvoll für die Manipulation von Daten, die bereits vorhanden ist. Jedes mal wenn du etwas zu bauen, wo Sie brauchen, um durch eine große Gruppe von Daten, und Sie wollen nicht, um erneut jene Berechnungen, die auf jeden Tastendruck, denken über die Verwendung einer berechneten Wert.

Einige gute Kandidaten umfassen, sind aber nicht beschränkt auf:

  • Aktualisieren einer großen Menge von Informationen, die einem Nutzer während der Eingabe, wie etwa das filtern einer Liste
  • Das sammeln von Informationen von Ihrem Vuex-Shop
  • Formular-Validierung
  • Daten-Visualisierungen, die ändern sich, je nachdem, was der Benutzer braucht, um zu sehen

Berechnete Eigenschaften sind ein wesentlicher Bestandteil des Vue zu verstehen. Sie sind Berechnungen, die zwischengespeichert wird, basierend auf den Abhängigkeiten und wird nur aktualisiert, wenn nötig. Sie sind extrem performant, wenn gut eingesetzt und außerordentlich nützlich. Es gibt viele große Bibliotheken, die mit dieser Art von Logik, die Sie jetzt beseitigen, mit nur ein paar Zeilen code.

Berechnete Eigenschaften nicht verwendet werden, wie Methoden, obwohl auf den ersten, Sie könnte ähnlich Aussehen – Sie sind unter Angabe einige Logik in eine Funktion und gibt – aber der name der Funktion wird eine Eigenschaft, die Sie würde dann in Ihrer Anwendung verwenden, wie Daten.

Wenn wir brauchten, um filter dieser großen Liste mit den Namen der Helden auf, was der Benutzer eingibt, hier ist, wie würden wir es tun. Wir halten diese wirklich einfache so können Sie sich die base-Konzepte nach unten. Ursprünglich auf unserer Liste, würde die Ausgabe in unser template mit Namen, die wir speichern in Daten:

neue Vue({
el: ‘#app’,
Daten() {
return {
Namen: [
‘Evan ‘ Sie’,
“John Lindquist’,
‘Jen Looper’,
Miriam Suzanne’,

]
}
}
})
<div id=”app”>
<h1>Helden</h1>
<ul>
<li v-for=”name in names”>
{{ name }}
</li>
</ul>
</div>

Lassen Sie uns nun einen filter erstellen, der für diesen Namen. Wir beginnen mit dem erstellen einer Eingabe mit dem v-Modell, das ursprünglich ein leerer string sein, aber wir werden schließlich verwenden, anpassen und filtern Sie durch unsere Liste. Wir nennen diese Eigenschaft findName und Sie können sehen, Sie verwiesen beide auf den Eingang und in die Daten.

<label for=”filtername”>Finden Sie Ihren Helden:</label>
<input v-model=”findName” id=”filtername” type=”text” />
Daten() {
return {
findName: “,
Namen: [
‘Evan ‘ Sie’,
“John Lindquist’,

]
}
}

Nun, wir können erstellen Sie die berechnete Eigenschaft filtert alle Namen, die basieren auf, was der Benutzer eingegeben hat in den Eingang, so dass etwas in unserem findName-Eigenschaft. Sie werden bemerken, dass ich mit regex hier, um sicherzustellen, dass nicht übereinstimmende Kapitalisierung spielt keine Rolle, wie Benutzer in der Regel nicht profitieren, wie Sie Art.

berechnet: {
filteredNames() {
lassen Sie filter = new RegExp (.findName, ‘i’)
wieder dieses.Namen.filter(el => el.match(filter))
}
}

Und jetzt werden wir aktualisieren, was wir mit Hilfe der in der Vorlage ausgegeben von:

<ul>
<li v-for=”name in names”>
{{ name }}
</li>
</ul>

…:

<ul>
<li v-for=”name filteredNames”>
{{ name }}
</li>
</ul>

Und es filtert für uns auf jeden Tastendruck! Wir hatten nur ein paar Zeilen code um diese Arbeit zu machen, und nicht zum laden von zusätzlichen Bibliotheken.

Finden Sie die Pen-Filter eine Liste mit Berechneten – Ende-von Sarah Drasner (@sdras) auf CodePen.

Ich kann Ihnen nicht sagen, wie viel Zeit ich sparen, wenn ich mit Ihnen. Wenn Sie mit Vue und noch nicht erforscht haben, Sie noch nicht, bitte tun, werden Sie danke dir.

Watchers

Vue hat die schöne Abstraktionen, und wer hat schon einen Programmierer für eine Weile, wird in der Regel sagen Sie, dass Abstraktionen, die ein Schmerz sein kann, denn schließlich erhalten Sie eine verwenden, falls Sie nicht lösen können. Aber diese situation ist berücksichtigt, weil Vue gewährt uns einen tieferen Zugang zu den in der Reaktivität system, das wir nutzen können, als Haken, um etwas beobachten, das ändert sich. Dies kann unglaublich nützlich sein, weil, wie Anwendungsentwickler, die meisten von dem, was wir sind verantwortlich für das sind Dinge, die sich ändern.

Watchers auch erlauben, uns zu schreiben, viel mehr deklarative code. Du bist nicht mehr verfolgen alles selbst. Vue ist bereits unter der Haube, so können Sie auch zugreifen, um änderungen an allen Eigenschaften, die Sie die tracking-Daten, berechnet, oder Requisiten, zum Beispiel.

Beobachter sind unglaublich gut für die Ausführung der Logik, gilt etwas anderes, wenn eine änderung an einer Eigenschaft Auftritt (das erste mal hörte ich diese Art der Umsetzung von Chris Fritz, aber er sagt, er hätte auch gehört, dass es von jemand anderes ☺️). Dies ist keine Feste Regel – Sie können absolut verwenden watchers für Logik, bezieht sich auf die Immobilie selbst, aber es ist eine schöne Art und Weise zu betrachten, wie Beobachter sind sofort anders aus berechneten Eigenschaften, wo die Veränderung wird in Bezug auf die Eigenschaft, die wir nutzen wollen.

Wir führen Sie durch die am meisten einfache Beispiel möglich, damit Sie einen Eindruck bekommen, was hier geschieht.

Ihr browser unterstützt nicht das video-tag.

neue Vue({
el: ‘#app’,
Daten() {
return {
– Zähler: 0
}
},
watch: {
counter() {
console.log(‘Der Zähler hat sich geändert!’)
}
}
})

Wie Sie sehen können in dem code von oben, sind wir die Speicherung von Zähler-Daten, und mit den Namen der Eigenschaft, wie den Namen der Funktion, sind wir in der Lage, um es zu sehen. Wenn wir den Verweis-Zähler in der Uhr, können wir beobachten, alle änderungen dieser Eigenschaft.

Übergang Zustand Mit Watchers

Wenn der Staat ähnlich genug sind, können Sie auch einfach übergang der Staat mit watchers. Hier ist ein Beispiel, das ich von Grund auf neu gebaut, der ein Diagramm mit Vue. Wenn sich die Daten geändert, die Beobachter aktualisiert wird, und einfach den übergang zwischen Ihnen.

SVG ist auch gut für eine Aufgabe wie diese, weil es mit Mathematik.

Finden Sie die Pen-Diagramm gemacht mit Vue, Übergang Stand von Sarah Drasner (@sdras) auf CodePen.

watch: {
ausgewählt: Funktion(newValue, oldValue) {

var tweenedData = {}

var update = function () {
lassen Sie obj = Objekt.Werte(tweenedData);
obj.pop();
diese.targetVal = obj;
}

var tweenSourceData = { onUpdate: update, onUpdateScope:}

for (let i = 0; i < oldValue.length; i++) {
lassen key = ich.toString()
tweenedData[key] = oldValue[i]
tweenSourceData[key] = newValue[i]
}

TweenMax.(tweenedData, 1, tweenSourceData)
}
}

Was ist hier passiert?

  • Zuerst erstellten wir ein dummy-Objekt, welches aktualisiert werden, von unserem Animations-Bibliothek.
  • Dann haben wir eine update-Funktion, die aufgerufen wird, auf jeden tween Schritt. Wir verwenden diese, um die push-Daten.
  • Dann erstellen wir ein Objekt, halten Sie die source-Daten, die getweent wird und die Funktion Zeiger für update-Ereignisse.
  • Wir erstellen eine for-Schleife und drehen Sie den aktuellen index in einem string
  • Dann können wir tween, über die unser Ziel dummy-Objekt, aber wir werden dies nur tun, für die bestimmte Schlüssel

Wir können auch die animation in watchers etwas zu schaffen, wie diese Zeit Unterschied Zifferblatt. Ich Reise ein bisschen und alle meine Mitarbeiter sind in verschiedenen Bereichen, so wollte ich einen Weg, um zu verfolgen, welche lokale Zeit in der wir alle waren, sowie einige, die Bedeutung der Wechsel von Tag/Nacht sowie.

Finden Sie die Pen-Vue-Zeit-Vergleich von Sarah Drasner (@sdras) auf CodePen.

Hier schauen wir die checked-Eigenschaft, und wir werden Feuer verschiedene Methoden enthalten, timeline-Animationen, ändern Sie den Farbton und die Sättigung, und einige andere Elemente basierend auf der relativen Zuordnung zu der aktuellen Zeit. Wie bereits erwähnt – die änderung tritt auf den dropdown -, aber was wir ausführen, ist die Logik, die andernorts angewendet werden.

watch: {
überprüft() {
lassen Sie Periode =.timeVal.slice(-2),
hr=.timeVal.slice(0, this.timeVal.indexOf(‘:’));

const dayhr = 12,
rpos = 115,
rneg = -118;

if ((Zeit === ‘AM’ && hr != 12) || (Zeit === ‘PM’ && hr == 12)) {
diese.spin(`${rneg – (rneg / dayhr) * h}`)
diese.animTime(1 – hr / dayhr, Zeitraum)
} else {
diese.spin(`${(rpos / dayhr) * h}`)
diese.animTime(hr / dayhr, Zeitraum)
}

}
},

Es gibt auch eine Reihe andere interessante Dinge über Beobachter, zum Beispiel: wir erhalten Zugriff auf die neuen und alten Versionen der Eigenschaft als Parameter, können wir festlegen, tief werden, wenn wir zusehen möchte ein verschachteltes Objekt. Für detailliertere Informationen, es gibt eine Menge guter Informationen in der Anleitung.

Sie können sehen, wie watchers kann unglaublich nützlich sein für alles, was zu aktualisieren—sei es in form Eingänge, asynchrone updates oder Animationen. Wenn du neugierig bist, wie die Reaktivität in Vue arbeitet, ist dieser Teil der guide ist wirklich sehr hilfreich. Wenn Sie wissen möchten, mehr über die Reaktivität im Allgemeinen, ich wirklich genossen Andre Staltz’ post und die Reaktivität Abschnitt von Mike Bostock Einen Besseren Weg, um Code.

Zusammenfassung

Ich hoffe, das war eine hilfreiche Aufschlüsselung, wie jede und beschleunigt Ihre Anwendungsentwicklung durch Verwendung Vue effizient. Es gibt einen stat gibt, verbringen wir 70% unserer Zeit als Programmierer code Lesen und 30% schreiben. Persönlich, ich Liebe, dass Sie, als Betreuer, die ich mir ansehen kann, eine Codebasis, die ich noch nie zuvor gesehen haben und sofort wissen, was der Autor vorgesehen hat durch die Unterscheidung von Methoden, berechnet, und watchers.