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

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.

e84a645d77f16f01a552f36f010f7960
f5b3ebc4cb932b9ccb69ea74d4ca8dd7
    e388a4556c0f65e1904146cc1a846beeReversed message: "{{ reversedNameMethod() }}"94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beeReversed message: "{{ reversedMessageComputed }}"94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

// 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!