Berechnete Eigenschaften und Listenerdetails

1. Berechnete Eigenschaften

Ausdrücke in Vorlagen sind sehr praktisch, sie sind jedoch in erster Linie für einfache Berechnungen gedacht. Wenn Sie zu viel Logik in eine Vorlage packen, kann diese unhandlich und schwer zu pflegen werden.

Zum Beispiel:

<div id="Beispiel">
  {{ message.split('').reverse().join('') }}
</div>

An diesem Punkt ist die Vorlage nicht mehr nur eine einfache deklarative Logik. Sie müssen eine Weile darauf schauen, um zu erkennen, dass wir hier die umgekehrte Zeichenfolge der Variablen message anzeigen möchten. Noch schwieriger wird die Handhabung, wenn Sie diese umgedrehte Zeichenfolge an mehreren Stellen in Ihrer Vorlage einfügen möchten.

Sie sollten daher für jede komplexe Logik berechnete Eigenschaften verwenden.

1.1 Einfaches Beispiel

<div id="Beispiel">
  <p>Ursprüngliche Nachricht: "{{ message }}"</p>
  <p>Berechnete umgekehrte Nachricht: "{{ reversedMessage }}"</p>
</div>
var vm = neuer Vue({
  el: '#Beispiel',
  Daten: {
    Nachricht: 'Hallo'
  },
  berechnet: {
    // Berechneter Eigenschaftsgetter
    umgekehrteNachricht: Funktion () {
      // „this“ bezieht sich auf die VM-Instanz return this.message.split('').reverse().join('')
    }
  }
})

Ergebnis:

Originalnachricht: „Hallo“

Berechnete umgekehrte Nachricht: „olleH“

Hier deklarieren wir eine berechnete Eigenschaft reversedMessage . Die von uns bereitgestellte Funktion wird als getter -Funktion für property vm.reversedMessage verwendet:

console.log(vm.reversedMessage) // => 'olleH'
vm.message = "Auf Wiedersehen"
console.log(vm.reversedMessage) // => 'eybdooG'

Sie können die Browserkonsole öffnen und vm im Beispiel selbst ändern. Der Wert von vm.reversedMessage hängt immer vom Wert von vm.message ab.

Sie können berechnete Eigenschaften in Vorlagen genauso binden wie normale property . Vue weiß vm.reversedMessage von vm.message abhängt. Wenn sich vm.message ändert, werden daher auch alle Bindungen aktualisiert, die von vm.reversedMessage abhängen. Und das Beste daran ist, dass wir diese Abhängigkeit deklarativ erstellt haben: Der berechnete getter hat keine Nebenwirkungen, was das Testen und Verstehen erleichtert.

1.2 Berechneter Eigenschaftscache vs. Methode

Möglicherweise haben Sie bemerkt, dass wir denselben Effekt erzielen können, indem wir Methoden in Ausdrücken aufrufen:

<p>Umgekehrte Nachricht: "{{ reversedMessage() }}"</p>
// In Komponentenmethoden: {
  umgekehrteNachricht: Funktion () {
    gib diese.Nachricht.Split('').Reverse().Join('') zurück
  }
}

Wir können dieselbe Funktion als Methode statt als berechnete Eigenschaft definieren. Das Endergebnis ist in beiden Fällen genau dasselbe. Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren reaktiven Abhängigkeiten zwischengespeichert werden. Eine Neubewertung erfolgt nur dann, wenn sich die zugehörigen reaktiven Abhängigkeiten ändern. Dies bedeutet, dass, solange sich message nicht geändert hat, mehrere Zugriffe auf reversedMessage sofort das zuvor berechnete Ergebnis zurückgeben, ohne dass die Funktion erneut ausgeführt werden muss.

Dies bedeutet auch, dass die folgende berechnete Eigenschaft nicht mehr aktualisiert wird, da Date.now() keine reaktive Abhängigkeit ist:

berechnet: {
  jetzt: Funktion () {
    returniere Date.now()
  }
}

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

Warum brauchen wir Caching? Angenommen, wir haben eine rechenintensive Eigenschaft A , die das Durchlaufen eines riesigen Arrays und die Durchführung zahlreicher Berechnungen erfordert. Wir haben dann möglicherweise andere berechnete Eigenschaften, die von A abhängen. Ohne Caching würden wir getter von A zwangsläufig mehrmals ausführen! Wenn Sie kein Caching wünschen, verwenden Sie stattdessen Methoden.

1.3 Berechnete Eigenschaften vs. überwachte Eigenschaften

Vue bietet eine allgemeinere Möglichkeit, Datenänderungen in Vue -Instanz zu beobachten und darauf zu reagieren: das Abhören von Eigenschaften. Wenn Sie Daten haben, die geändert werden müssen, wenn sich andere Daten ändern, besteht die Gefahr, dass watch missbraucht werden – insbesondere, wenn Sie bereits AngularJS verwendet haben. Es ist jedoch oft besser, berechnete Eigenschaften anstelle von imperativen watch -Callbacks zu verwenden.

Betrachten Sie dieses Beispiel:

<div id="demo">{{ vollständigerName }}</div>
var vm = neuer Vue({
  el: '#demo',
  Daten: {
    Vorname: 'Foo',
    Nachname: 'Bar',
    vollständiger Name: „Foo Bar“
  },
  betrachten:
    Vorname: Funktion (Wert) {
      dieser.vollständigerName = Wert + ' ' + dieser.letzterName
    },
    Nachname: Funktion (Wert) {
      dieser.vollständigerName = dieser.vorname + ' ' + val
    }
  }
})

Der obige Code ist zwingend und wiederholt sich. Vergleichen Sie dies mit der berechneten Eigenschaftsversion:

var vm = neuer Vue({
  el: '#demo',
  Daten: {
    Vorname: 'Foo',
    Nachname: 'Bar'
  },
  berechnet: {
    vollständigerName: Funktion () {
      returniere diesen.Vorname + ' ' + diesen.Nachname
    }
  }
})

Viel besser, nicht wahr?

1.4 Berechnete Eigenschaftssetter

Berechnete Eigenschaften haben standardmäßig nur einen Getter, Sie können bei Bedarf aber auch einen Setter angeben:

// ...
berechnet: {
  vollständiger Name:
    // Getter
    erhalten: Funktion () {
      returniere diesen.Vorname + ' ' + diesen.Nachname
    },
    // Setter
    set: Funktion (neuerWert) {
      Variablennamen = neuerWert.split(' ')
      dieser.Vorname = Namen[0]
      this.lastName = Namen[Namen.Länge - 1]
    }
  }
}
// ...

Wenn Sie jetzt vm.fullName = 'John Doe' ausführen, wird setter aufgerufen und vm.firstName und vm.lastName werden entsprechend aktualisiert.

2. Zuhörer

Während berechnete Eigenschaften in den meisten Fällen geeigneter sind, gibt es Zeiten, in denen ein benutzerdefinierter Listener erforderlich ist. Aus diesem Grund bietet Vue mit der watch eine allgemeinere Möglichkeit, auf Datenänderungen zu reagieren. Dieser Ansatz ist besonders nützlich, wenn Sie bei Datenänderungen asynchrone oder aufwändige Vorgänge ausführen müssen.

Zum Beispiel:

<div id="Uhr-Beispiel">
  <p>
    Stellen Sie eine Ja/Nein-Frage:
    <input v-model="Frage">
  </p>
  <p>{{ Antwort }}</p>
</div>
<!-- Da das Ökosystem an AJAX-Bibliotheken und allgemeinen Tools bereits recht umfangreich ist, wird der Vue-Kerncode nicht wiederholt-->
<!-- Diese Funktionen werden bereitgestellt, um die Dinge schlank zu halten. Dies gibt Ihnen auch die Freiheit, Werkzeuge auszuwählen, mit denen Sie besser vertraut sind. -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<Skript>
var watchExampleVM = neuer Vue({
  el: '#Uhrenbeispiel',
  Daten: {
    Frage: '',
    Antwort: „Ich kann Ihnen keine Antwort geben, bis Sie eine Frage stellen!“
  },
  betrachten:
    // Wenn sich `question` ändert, wird diese Funktion question: function (newQuestion, oldQuestion) { ausführen.
      this.answer = „Warte darauf, dass Sie mit dem Tippen aufhören …“
      dies.debouncedGetAnswer()
    }
  },
  erstellt: Funktion () {
    // „_.debounce“ ist eine Funktion, die die Häufigkeit von Operationen über Lodash begrenzt.
    // In diesem Beispiel möchten wir die Häufigkeit des Zugriffs auf yesno.wtf/api begrenzen. // Die AJAX-Anfrage wird erst gestellt, wenn der Benutzer mit der Eingabe fertig ist. Um mehr über // die Funktion `_.debounce` (und ihre Cousine `_.throttle`) zu erfahren,
    // Bitte beachten Sie: https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  Methoden: {
    getAnswer: Funktion () {
      wenn (diese.Frage.indexOf('?') === -1) {
        this.answer = 'Fragen enthalten normalerweise ein Fragezeichen. ;-)'
        zurückkehren
      }
      this.answer = „Denke nach …“
      var vm = dies
      axios.get('https://yesno.wtf/api')
        .then(Funktion (Antwort) {
          vm.Antwort = _.capitalize(Antwort.Daten.Antwort)
        })
        .catch(Funktion (Fehler) {
          vm.answer = 'Fehler! Die API konnte nicht erreicht werden. ' + Fehler
        })
    }
  }
})
</Skript>

Ergebnis:

Stellen Sie eine Ja/Nein-Frage:

Ich kann Ihnen keine Antwort geben, bis Sie eine Frage stellen!

In diesem Beispiel können wir mithilfe der watch einen asynchronen Vorgang ausführen (auf eine API zugreifen), die Häufigkeit der Ausführung dieses Vorgangs begrenzen und einen Zwischenstatus festlegen, bevor wir das endgültige Ergebnis erhalten. Dies sind Dinge, die berechnete Eigenschaften nicht können.

Dies ist das Ende dieses Artikels über die Details zu berechneten Eigenschaften und Listenern. Weitere verwandte berechnete Eigenschaften und Listener finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!