Als @gleenk nach einem praktischen Beispiel fragte, um die Cache- und Abhängigkeitsunterschiede zwischen Methoden und berechneten Eigenschaften zu verdeutlichen, zeige ich ein einfaches Szenario:
app.js.
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
Hier haben wir 2 Methoden und 2 berechnete Eigenschaften, die dieselbe Aufgabe ausführen. Die Methoden addToAmethod& addToBmethodund die berechneten Eigenschaften addToAcomputed& addToBcomputedaddieren ageentweder +20 (dh den Wert) zu entweder aoder b. Die Methoden werden beide jedes Mal aufgerufen, wenn eine Aktion für eine der aufgelisteten Eigenschaften ausgeführt wurde, auch wenn sich die Abhängigkeiten für eine bestimmte Methode nicht geändert haben. Für die berechneten Eigenschaften wird der Code nur ausgeführt, wenn sich eine Abhängigkeit geändert hat. Beispielsweise wird einer der spezifischen Eigenschaftswerte ausgelöst, die sich auf A oder B beziehenaddToAcomputed oder ausaddToBcomputed , respectively.
Die Methode und die berechneten Beschreibungen scheinen ziemlich ähnlich zu sein, aber da @Abdullah Khan sie bereits spezifiziert hat, sind sie nicht dasselbe ! Versuchen wir nun, etwas HTML hinzuzufügen, um alles zusammen auszuführen und zu sehen, wo der Unterschied liegt.
Die Method Case Demo
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Methods - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Methods</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAmethod() }}</p>
<p>Age + B = {{ addToBmethod() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
Das erklärte Ergebnis
Wenn ich auf die Schaltfläche "Zu A hinzufügen " klicke , werden alle Methoden aufgerufen (siehe das Ergebnis des Konsolenprotokollbildschirms oben). Dies addToBmethod()wird ebenfalls ausgeführt, aber ich habe die Schaltfläche "Zu B hinzufügen " nicht gedrückt. Der Eigenschaftswert, der sich auf B bezieht, hat sich nicht geändert. Das gleiche Verhalten tritt auf, wenn wir auf die Schaltfläche "Zu B hinzufügen " klicken , da beide Methoden unabhängig von Abhängigkeitsänderungen aufgerufen werden. Nach diesem Szenario ist dies eine schlechte Praxis, da wir die Methoden jedes Mal ausführen, auch wenn sich die Abhängigkeiten nicht geändert haben. Dies ist sehr ressourcenintensiv, da es keinen Cache für Eigenschaftswerte gibt, die sich nicht geändert haben.
Die Demo zum Fall von berechneten Eigenschaften
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Computed properties - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Properties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAcomputed }}</p>
<p>Age + B = {{ addToBcomputed }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
Das erklärte Ergebnis
Wenn ich auf die Schaltfläche "Zu A hinzufügen " klicke , wird nur die berechnete Eigenschaft addToAcomputedaufgerufen, da die berechneten Eigenschaften, wie bereits erwähnt, nur ausgeführt werden, wenn sich eine Abhängigkeit geändert hat. Und da ich die Schaltfläche "Zu B hinzufügen " nicht gedrückt habe und sich der Wert der Alterseigenschaft für B nicht geändert hat, gibt es keinen Grund, die berechnete Eigenschaft aufzurufen und auszuführen addToBcomputed. In gewissem Sinne behält die berechnete Eigenschaft den "gleichen unveränderten" Wert für die B-Eigenschaft wie eine Art Cache bei. Unter diesen Umständen gilt dies als bewährte Methode .
