Vorwort
Berechnete Attribute werden verwendet, um den deklarativen Ausdruck zu beschreiben, dass ein Wert von anderen Werten abhängt. Wenn Sie Daten an eine berechnete Eigenschaft in einer Vorlage binden, aktualisiert VUE den DOM, wenn ein Wert, von dem sie abhängt, dass sich die berechnete Eigenschaft ändert. Diese Funktion ist sehr leistungsfähig und kann Ihren Code deklarativer, datengetrieben und einfach zu warten.
Ausdrücke in Vorlagen sind sehr bequem, sie werden jedoch nur für einfache Operationen verwendet.
Vorlage besteht darin, die Struktur der Ansicht zu beschreiben. Wenn Sie zu viel Logik in die Vorlage in die Vorlage einfügen, ist die Vorlage zu schwer und schwer zu warten.
Deshalb begrenzt Vue.js Bindungsausdrücke an einen Ausdruck.
Wenn mehr als ein Ausdruck erforderlich ist, sollten berechnete Eigenschaften verwendet werden.
Schauen wir uns dieses einfache Beispiel an
<div id = "example"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({// Der Grund für die Benennung von VM ist, dass dies tatsächlich VM in mvvm el: '#example', data: {a: 1}, computer: {// // // // // // // // //s ~ a -to -forcter -forcter -zu -computerther -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -zu -dather -b: {//` th. Instanz return this.a + 1}}})Ausgangsergebnis:
A = 1, B = 2
Hier deklarieren wir eine berechnete Eigenschaft b. Die Funktion, die wir zur Verfügung stellen, wird als Getter für die Immobilie VM.B verwendet.
console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
Sie können berechnete Eigenschaften in einer Vorlage binden, wie Sie eine normale Eigenschaft binden würden. Vue weiß, dass VM.B von VM.A abhängt. Wenn sich VM.A ändert, werden Bindungen, die von VM.B abhängen, ebenfalls aktualisiert. Und das Beste ist, dass wir diese Abhängigkeit deklarativ erstellen: Die Getter der berechneten Eigenschaften sind sauber und haben keine Nebenwirkungen, sodass sie auch leicht zu testen und zu verstehen sind.
Wenn Sie Datenänderungen in VUE -Instanzen beobachten möchten, können Sie eine von VUE.JS $watch bereitgestellte Methode verwenden.
<div id = "Demo"> {{Fullname}} </div> var vm = new Vue ({Daten: {FirstName: 'foo', Lastname: 'Bar', Fullname: 'foo bar'}}) vm. this.lastname}) vm. Die obige Methode kann jedoch auch unter Verwendung von computed implementiert werden:
var vm = new Vue ({Daten: {FirstName: 'foo', Lastname: 'bar'}, berechnet: {fullname: function () {return this.firstname + '' + this.lastname}}}) Ist es einfacher, so zu schreiben? Es gibt keinen unnötigen doppelten Code? Der Beamte fördert auch die Verwendung computed Methoden.
Als ich oben über computed sprach, wurde erwähnt, dass diese Methode die Standard get -Methode liefert. Gibt es also set Methode?
// ...compute: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}// ... Wenn wir vm.fullName = 'John Doe' anrufen, wird setter angerufen. vm.firstName und vm.lastName haben ebenfalls entsprechende Updates. Diese Methode ist manchmal nützlich.
Zusammenfassen
Im obigen dreht sich alles um Vue.js Computing -Attribute. Ich hoffe, dieser Artikel wird für alle hilfreich sein. Der Editor wird auch den Inhalt über Vue.js nacheinander aktualisieren. Interessierte Freunde können weiterhin Wulin.com folgen.