Was ist der Unterschied zwischen berechneten und Methoden in Vue.js? (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Frage, was der Unterschied zwischen berechneten und Methoden in Vue.js ist. (Mit Beispielen) hat es einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Es wurde in den offiziellen Dokumenten erklärt. Ich werde mein Verständnis hier festhalten.

Verwendungsszenarien von Computern

Für komplexe logische Ausdrücke in HTML-Vorlagen sollte die entsprechende Logik vorhanden sein, um zu verhindern, dass die Logik zu schwer und schwer zu warten ist in berechnete Attribute eingefügt werden.

Zum Beispiel dieses

<div id="root">
     <p>Reversed message: "{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}"</p>
</div>

Hier ist die Vorlage keine einfache deklarative Logik mehr. Hier ist die umgedrehte Zeichenfolge, die die variable Nachricht anzeigen soll. Solche Ausdrücke, die eine komplexe Logikverarbeitung enthalten, sollten berechnete Eigenschaften verwenden.

Der Unterschied zwischen berechnet und Methoden

1. berechnet ist ein Attributaufruf, während Methoden ein Funktionsaufruf sind

Dies bedeutet, dass in der HTML-Interpolation < Die durch 🎜>

berechnete Methode wird in Form eines Attributzugriffs aufgerufen, z. B. {{reversedMessageComputed}}

Sie müssen () zum Aufrufen hinzufügen, z. B. {{reversedNameMethod( ) }}, andernfalls wird der folgende Inhalt in der Ansicht gerendert

function () { [native code] }

2. Berechnet hat eine Caching-Funktion, die Methoden sind jedoch nicht

hier Lassen Sie mich aus der offiziellen Dokumentation zitieren

Berechnete Eigenschaften werden basierend auf ihren Abhängigkeiten zwischengespeichert. Sie werden nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern.

<!-- html -->
<div id="root">
    <p>Reversed message: "{{ reversedNameMethod() }}"</p>
    <p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>

// javascript
var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 计算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

Im obigen Beispiel bedeutet Caching, dass ein mehrmaliger Zugriff auf die berechnete Eigenschaft „reversedMessageComputed“ sofort das vorherige Berechnungsergebnis zurückgibt, solange sich die Nachricht nicht geändert hat, ohne dass die Funktion erneut ausgeführt werden muss. Die Methode reversedNameMethod() führt die Funktion bei jedem Aufruf erneut aus.

Gleichzeitig ist jedoch zu beachten, dass dies auch bedeutet, dass die folgenden berechneten Eigenschaften nicht mehr aktualisiert werden, da Date.now() keine reaktive Abhängigkeit ist: der Wert von

// javascript
computed: {
    now: function () {
        return Date.now()
    }
}

wird jetzt in der Vue-Instanz sein. Es wird bei der Transformation generiert und ändert sich nie.

Im Gegensatz dazu führt die aufrufende Methode die Funktion immer erneut aus, wenn ein erneutes Rendern ausgelöst wird.

Andere Anweisungen für berechnete

berechnete und Methoden dürfen nicht denselben Namen haben

Vue leitet alle Dinge in Methoden und Daten an das von Vue generierte Objekt weiter, das überschreibt Attribute mit doppelten Namen in berechnet

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen berechneten und Methoden in Vue.js? (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!