Methode vs In Vue berechnet

Was ist der Hauptunterschied zwischen einer Methode und einem berechneten Wert in Vue.js?

Sie sehen gleich und austauschbar aus.

Berechnete Werte und Methoden sind in Vue sehr unterschiedlich und in den meisten Fällen definitiv nicht austauschbar.

Berechnete Eigenschaft

Ein geeigneterer Name für einen berechneten Wert ist eine berechnete Eigenschaft . Wenn der Vue instanziiert wird, werden berechnete Eigenschaften mit einem Getter und manchmal einem Setter in eine Eigenschaft des Vue konvertiert. Grundsätzlich können Sie sich einen berechneten Wert als abgeleiteten Wert vorstellen, der automatisch aktualisiert wird, wenn einer der zugrunde liegenden Werte, die zur Berechnung verwendet werden, aktualisiert wird. Sie rufen keinen berechneten Wert auf und er akzeptiert keine Parameter. Sie verweisen auf eine berechnete Eigenschaft wie auf eine Dateneigenschaft. Hier ist das klassische Beispiel aus der Dokumentation :

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

Worauf im DOM wie folgt verwiesen wird:

<p>Computed reversed message: "{{ reversedMessage }}"</p>

Berechnete Werte sind sehr wertvoll für die Bearbeitung von Daten, die auf Ihrem Vue vorhanden sind. Wann immer Sie Ihre Daten filtern oder transformieren möchten, verwenden Sie normalerweise einen berechneten Wert für diesen Zweck.

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

Berechnete Werte werden auch zwischengespeichert, um zu vermeiden, dass ein Wert wiederholt berechnet wird, der nicht neu berechnet werden muss, wenn er sich nicht geändert hat (da er sich beispielsweise möglicherweise nicht in einer Schleife befindet).

Methode

Eine Methode ist nur eine Funktion, die an die Vue-Instanz gebunden ist. Es wird nur ausgewertet, wenn Sie es explizit aufrufen. Wie alle Javascript-Funktionen akzeptiert es Parameter und wird bei jedem Aufruf neu ausgewertet. Methoden sind in den gleichen Situationen nützlich, in denen jede Funktion nützlich ist.

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichCharacter))
    }
}

Die Dokumentation von Vue ist wirklich gut und leicht zugänglich. Ich empfehle es.

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 .

Von dem docs

..computed Eigenschaften werden basierend auf ihren Abhängigkeiten zwischengespeichert. Eine berechnete Eigenschaft wird nur dann neu bewertet, wenn sich einige ihrer Abhängigkeiten geändert haben.

Wenn Sie möchten, dass Daten zwischengespeichert werden, verwenden Sie berechnete Eigenschaften. Wenn Sie nicht möchten, dass Daten zwischengespeichert werden, verwenden Sie einfache Methodeneigenschaften.

Einer der Unterschiede zwischen berechnet und Methode. Angenommen, wir haben eine Funktion, die den Zählerwert zurückgibt (der Zähler ist nur variabel). Schauen wir uns an, wie sich die Funktion sowohl in der berechneten als auch in der Methode verhält

Berechnet

Bei der ersten Ausführung wird der Code in der Funktion ausgeführt und vuejs speichert den Zählerwert im Cache (für einen schnelleren Zugriff). Wenn wir die Funktion erneut aufrufen, führt vuejs den in dieser Funktion geschriebenen Code nicht erneut aus. Zunächst werden alle am Zähler vorgenommenen Änderungen überprüft oder nicht. Wenn Änderungen vorgenommen werden, wird nur der Code, der sich in dieser Funktion befindet, erneut ausgeführt. Wenn keine Änderungen am Zähler vorgenommen wurden, führt vuejs die Funktion nicht erneut aus. Es wird einfach das vorherige Ergebnis aus dem Cache zurückgegeben.

Methode

Dies ist genau wie eine normale Methode im Javascript. Immer wenn wir die Methode aufrufen, wird der Code innerhalb der Funktion ausgeführt, unabhängig von Änderungen am Zähler.

Die Methode führt den Code unabhängig von Änderungen im Code immer wieder aus. Wobei wie berechnet der Code nur dann erneut ausgeführt wird, wenn sich einer der Werte seiner Abhängigkeit geändert hat. Andernfalls erhalten wir das vorherige Ergebnis aus dem Cache, ohne es erneut auszuführen

Hier ist eine Aufschlüsselung dieser Frage.

Wann werden Methoden angewendet?

• Um auf ein Ereignis im DOM zu reagieren
• So rufen Sie eine Funktion auf, wenn in Ihrer Komponente etwas passiert.
• Sie können eine Methode über berechnete Eigenschaften oder Beobachter aufrufen.

Wann werden berechnete Eigenschaften verwendet?

• Sie müssen neue Daten aus vorhandenen Datenquellen zusammenstellen
• Sie haben eine Variable in Ihrer Vorlage, die aus einer oder mehreren Dateneigenschaften erstellt wurde
• Sie möchten einen komplizierten, verschachtelten Eigenschaftsnamen auf einen besser lesbaren und benutzerfreundlichen Namen reduzieren (ihn jedoch aktualisieren, wenn sich die ursprüngliche Eigenschaft ändert).
• Sie müssen auf einen Wert aus der Vorlage verweisen. In diesem Fall ist das Erstellen einer berechneten Eigenschaft das Beste, da sie zwischengespeichert wird.
• Sie müssen Änderungen von mehr als einer Dateneigenschaft abhören

Berechnete Eigenschaften

Berechnete Eigenschaften werden auch als berechneter Wert bezeichnet. Dies bedeutet, dass sie aktualisiert werden und jederzeit geändert werden können. Außerdem werden die Daten zwischengespeichert, bis sie sich ändern. Wenn der Vue instanziiert wird, werden berechnete Eigenschaften in eine Eigenschaft konvertiert.

Eine weitere Sache, die ich teilen möchte: Sie können keinen Parameter in den berechneten Eigenschaften übergeben, weshalb beim Aufrufen einer Computereigenschaft keine Klammern erforderlich sind.

Methoden

Methoden sind die gleichen wie Funktionen und funktionieren genauso. Außerdem macht eine Methode nichts, wenn Sie sie nicht aufrufen. Wie alle Javascript-Funktionen akzeptiert es auch Parameter und wird bei jedem Aufruf neu ausgewertet. Danach können sie keine Werte zwischenspeichern

In der Methode ist das Aufrufen von Klammern vorhanden und Sie können einen oder mehrere Parameter darin senden.

Stolperte über die gleiche Frage. Für mich ist das klarer:

1. Wenn Vue.js die v-on directiveMethode gefolgt von einer Methode sieht , weiß es genau, welche Methode aufgerufen werden muss und wann sie aufgerufen werden muss.

<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button

<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */

2. Wenn eine Methode ohne diev-on directive aufgerufen wird, wird sie jedes Mal aufgerufen, wenn ein Ereignis auf der Seite ausgelöst wird, die das DOM aktualisiert (oder einfach einen Teil der Seite neu rendern muss). Auch wenn diese Methode nichts mit dem ausgelösten Ereignis zu tun hat.

<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
   messageUppercase() {
      console.log("messageUpercase");
      return this.message.toUpperCase();
   }
}
/* The method `messageUppercase()` is called on every button click, mouse hover 
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/

3. Eine berechnete Eigenschaft wird nur aufgerufen, wenn ein Eigenschaftswert geändert wird, auf den das thisWort in seiner Funktionsdefinition verweist .
   

<p>Uppercase message: {{ messageUppercase }}</p> 
data() {
 return {
    message: "I love Vue.js"
   }
 },
computed: {
 messageUppercase() {
    console.log("messageUpercase");
    return this.message.toUpperCase();
 }
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific 
event changes the value of message.  */

Das Mitnehmen hier ist, dass es die beste Vorgehensweise ist, die computedEigenschaften zu verwenden, falls eine Methode nicht mit dem aufgerufen wird v-on directive.