Berechnete Eigenschaften im Vue.js-Tutorial

Die Inline-Ausdrücke von Vue.js sind sehr praktisch, aber ihre am besten geeigneten Verwendungsszenarien sind einfache boolesche Operationen oder die Verkettung von Zeichenfolgen. Wenn eine komplexere Logik beteiligt ist, sollten Sie berechnete Eigenschaften verwenden.

Berechnete Attribute werden verwendet, um deklarativ zu beschreiben, dass ein Wert von anderen Werten abhängt. Wenn Sie Daten an eine berechnete Eigenschaft in einer Vorlage binden, aktualisiert Vue das DOM, wenn einer seiner abhängigen Werte zu einer Änderung der berechneten Eigenschaft führt. Diese Funktion ist sehr leistungsstark und kann Ihren Code deklarativer, datengesteuerter und einfacher zu warten machen.

Normalerweise ist es sinnvoller, berechnete Eigenschaften zu verwenden, als prozedurale $watch-Rückrufe. Zum Beispiel das folgende Beispiel:

<div id="demo">{{fullName}}</div>
var vm = new Vue({
data: {
firstName: &#39;Foo&#39;,
lastName: &#39;Bar&#39;,
fullName: &#39;Foo Bar&#39;
}
})
vm.$watch(&#39;firstName&#39;, function (val) {
this.fullName = val + &#39; &#39; + this.lastName
})
vm.$watch(&#39;lastName&#39;, function (val) {
this.fullName = this.firstName + &#39; &#39; + val
})

Der obige Code ist prozedural und relativ umständlich. Vergleichen Sie die berechnete Attributversion:

var vm = new Vue({
el:'#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

Fühlen Sie sich besser? Darüber hinaus können Sie auch einen Setter für die berechnete Eigenschaft bereitstellen:

computed: {
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]
}
}
}

Cache für berechnete Eigenschaften

Vor 0.12.8 berechnet Eigenschaften Es ist nur ein Akt des Abrufens eines Werts – der Getter wird jedes Mal neu ausgewertet, wenn Sie darauf zugreifen. Dies wurde in 0.12.8 verbessert – der Wert einer berechneten Eigenschaft wird zwischengespeichert und nur dann neu berechnet, wenn sich eine ihrer reaktiven Abhängigkeiten ändert.

Stellen Sie sich vor, wir haben eine aufwendig berechnete Eigenschaft A, die eine Schleife über ein großes Array und die Durchführung vieler Operationen erfordert. Und wir haben auch eine berechnete Eigenschaft, die von A abhängt. Ohne Caching würden wir potenzielle Leistungsprobleme verursachen, indem wir unnötig viele Aufrufe an den Getter von A tätigen. Beim Caching wird der Wert von A zwischengespeichert, sofern sich seine Abhängigkeiten nicht ändern, sodass ein mehrfacher Zugriff darauf nicht zu einer großen Anzahl unnötiger Vorgänge führt.

Wir sollten jedoch immer noch verstehen, was als „reaktive Abhängigkeit“ angesehen werden würde:

var vm = new Vue({
data: {
msg: 'hi'
},
computed: {
example: {
return Date.now() + this.msg
}
}
})

Im obigen Beispiel Berechnete Eigenschaften hängen von vm.msg ab. Da es sich um eine Dateneigenschaft handelt, die in der Vue-Instanz beobachtet wird, wird sie als reaktive Abhängigkeit betrachtet. Immer wenn sich vm.msg ändert, wird der Wert von vm.example neu berechnet.
Date.now() ist jedoch keine reaktive Abhängigkeit, da es nichts mit dem Datenbeobachtungssystem von Vue zu tun hat. Wenn Sie daher in Ihrem Programm auf vm.example zugreifen, werden Sie feststellen, dass der Zeitstempel immer derselbe Wert ist, es sei denn, vm.msg löst eine Neuberechnung aus.

Manchmal müssen Sie den einfachen Datenerfassungsmodus beibehalten und möchten bei jedem Zugriff auf vm.example eine Neuberechnung auslösen. Ab 0.12.11 können Sie die Cache-Unterstützung für eine spezielle berechnete Eigenschaft ein- und ausschalten:

computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}
}
}

Jetzt jedes Mal, wenn Sie auf vm.example zugreifen , der Zeitstempel wird rechtzeitig aktualisiert. Beachten Sie jedoch, dass dies nur dann der Fall ist, wenn der Zugriff aus einem JavaScript-Programm heraus erfolgt. Die Datenbindung ist immer noch treiberabhängig. Wenn Sie eine berechnete {{example}}-Eigenschaft in eine Vorlage binden, wird das DOM nur aktualisiert, wenn sich die reaktive Abhängigkeit ändert.