Ich versuche herauszufinden, wann die Methode Eigenschaft aufgerufen werden soll, im Gegensatz zu wann eine berechnete Eigenschaft am besten aufgerufen werden soll. Es scheint mir, dass eine Berechnung im Allgemeinen vorzuziehen ist, da eine Methode immer dann reagiert, wenn eine Eigenschaft aufgerufen wird, die auf das DOM zugreift.Vue.js Methoden vs. berechnete Eigenschaften. Wie sie mit dem DOM interagieren
Im folgenden Code verfolgen die beiden Schaltflächen einen Basiszähler, der um 1 erhöht wird. Die gleiche Ausgabe wird über eine Methode und eine berechnete Eigenschaft an das DOM übergeben. Jedes Inkrement löst sowohl die berechneten als auch die Methodeneigenschaften aus, die in der Konsole angezeigt werden.
<div id="content">
<!--counter control-->
<button v-on:click="counter++">Increase Counter</button>
<button v-on:click="counter--">Decrease Counter</button>
<!--counter output-->
<p>{{counter}}</p>
<p>{{ resultMethod() }}</p>
<p>{{ resultComputed }}</p>
</div>
<script>
new Vue({
el: '#content',
data: {
counter: 0
},
computed: {
resultComputed: function(){
console.log("computed.result was run");
return this.counter < 5 ? 'small_number' : 'LARGENUMBER';
}
},
methods: {
resultMethod: function(){
console.log("methods.result was run");
return this.counter < 5 ? 'small_number' : 'LARGENUMBER';
}
}
})
</script>
Nun, wenn wir fügen noch ein paar Daten Eigenschaften wir sie sehen können, dass Tracking nicht das Verfahren oder die berechnete Eigenschaft verursacht ausgelöst werden.
<!--new data options-->
<button v-on:click="secondCounter++">Second Counter</button>
<button v-on:click="formSubmit=true">Form Submit</button>
//New Data Properties
secondCounter: 0,
formSubmit: false
nun diese Daten Eigenschaften Anzeige auf das DOM erstes zeigt, dass die Daten tatsächlich richtig verfolgt werden, und zweitens diese Aktionen die gleichen Methoden Eigenschaft als unseren Zähler auslösen, auch wenn diese Variablen nicht auf dieses Verfahren verwandt sind.
<p>{{secondCounter}}</p>
<p>{{formSubmit}}</p>
Schließlich, wenn wir ein völlig zufällig und nicht verwandte Verfahren und Referenz in dem DOM erstellen, dies wird auch jedes Mal eines unserer Variablen genannt werden, aus dem DOM geändert. Ich benutze die einfache Methode als ein Beispiel.
<h2>{{ unrelatedMethod() }}</h2>
unrelatedMethod: function(){
console.log("We are now using another random method");
var number = 2000;
return number;
}
Was genau passiert hier hinter den Kulissen? Muss Vue jede verwandte Eigenschaft jedes Mal ausführen, wenn das DOM aktualisiert wird? Wann wären Methoden besser als berechnete Eigenschaften?