Heim > Artikel > Web-Frontend > Erfahren Sie mehr über berechnete Eigenschaften in Vue
Erfahren Sie mehr über berechnete Eigenschaften in Vue
- 青灯夜游nach vorne
- 2020-11-02 17:53:412652Durchsuche
Die folgende Spalte „Vue.js-Tutorial“ führt Sie durch die berechneten Eigenschaften in Vue. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Ausdrücke in Vorlagen sind sehr praktisch, aber ursprünglich für
einfache Operationen konzipiert. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel: <p id="example">
{{ message.split('').reverse().join('') }}</p>Der Ausdruck hier enthält 3 Operationen, was nicht sehr klar ist. Wenn Sie also auf komplexe Logik stoßen, sollten Sie das spezielle berechnete Attribut von Vue verwenden, um damit umzugehen.
Eine Vielzahl komplexer Logiken kann in einem berechneten Attribut vervollständigt werden, einschließlich Operationen, Funktionsaufrufen usw., solange am Ende ein Ergebnis zurückgegeben wird.
Lassen Sie uns das obige Beispiel mit berechneten Attributen neu schreiben
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () { // `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
Das Ergebnis:
Ursprüngliche Nachricht: „Hallo“
Berechnete umgekehrte Nachricht: „olleH“
Zusätzlich zur einfachen Verwendung des obigen Beispiels:
Berechnete Attribute Sie können sich auch auf Daten aus mehreren Vue-Instanzen verlassen. Solange sich die Daten ändern, werden die berechneten Eigenschaften erneut ausgeführt und die Ansicht aktualisiert.<body>
<p id="app">
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
</p></body>
var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){ this.package1.count++
}
}
});
Es gibt zwei sehr praktische Tipps für berechnete Eigenschaften, die leicht übersehen werden: Erstens können berechnete Eigenschaften von anderen berechneten Eigenschaften abhängen. Zweitens können berechnete Eigenschaften nicht nur auf den Daten der aktuellen Vue-Instanz basieren, sondern auch darauf die Daten anderer Instanzen , Zum Beispiel: <p id="app1"></p>
<p id="app2">{{ reverseText}}</p>
var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算 }
}
});Jede berechnete Eigenschaft enthält einen Getter und einen Setter, wobei nur Getter zum Lesen verwendet werden.
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
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];
}
}
}
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。 In den meisten Fällen verwenden wir nur die Standard-Getter-Methode zum Lesen einer berechneten Eigenschaft. Setter werden in Unternehmen selten verwendet. Wenn Sie also eine berechnete Eigenschaft deklarieren, können Sie die Standard-Schreibmethode direkt verwenden, ohne sowohl Getter als auch Setter deklarieren zu müssen . .
3. Berechnetes Attribut-Caching
Im obigen Beispiel können wir neben der Verwendung berechneter Attribute auch den gleichen Effekt erzielen, indem wir Methoden in Ausdrücken aufrufen, wie zum Beispiel:
<p>{{reverseTitle()}}</p>
// 在组件中methods: {
reverseTitle: function () { return this.title.split('').reverse().join('')
}
}Wir können dieselbe Funktion als a definieren Da es sich nicht um eine berechnete Eigenschaft handelt, sondern um eine Methode, ist das Endergebnis beider Methoden tatsächlich genau das gleiche. Nur einer verwendet reverseTitle()
, um den Wert abzurufen, und der andere verwendetreverseTitle, um den Wert abzurufen. Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden
.Berechnete Eigenschaften werden nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern. Das bedeutet, dass, solange sich der Titel nicht geändert hat, bei mehrmaligem Zugriff auf die berechnete Eigenschaft „reverseTitle“ sofort das vorherige Berechnungsergebnis zurückgegeben wird, ohne dass die Funktion erneut ausgeführt werden muss.
Ein kleines Beispiel:
<p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
computed: {
reverseTitle: function(){ return this.title.split('').reverse().join('') //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
},
price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods: { //对象的方法
add: function(){ this.package1.count++
},
reverseTitle1: function(){ return this.title.split('').reverse().join('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},
Im Gegensatz dazu führt die aufrufende Methode die Funktion immer dann erneut aus, wenn ein erneutes Rendern ausgelöst wird. Warum brauchen wir Caching? Angenommen, wir haben eine teure berechnete Eigenschaft A, die das Durchqueren eines riesigen Arrays und die Durchführung vieler Berechnungen erfordert. Dann haben wir möglicherweise andere berechnete Eigenschaften, die von A
abhängen.Wenn kein Cache vorhanden ist, führen wir den Getter von A zwangsläufig mehrmals aus! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden. 🔜 Besuchen Sie: Programmierunterricht
! !Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über berechnete Eigenschaften in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!