Von Vue berechnete Eigenschaften und praktischer Fallaustausch mit Hörern

Dieses Mal werde ich praktische Fälle von Vue-Berechnungsattributen und Zuhörern vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue-Berechnungsattributen und Zuhörern? Stehen Sie auf und schauen Sie nach.

Grundlegendes Beispiel

<p id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</p>
var vm = new Vue({
 el: '#example',
 data: {
  message: 'Hello'
 },
 computed: {
  // 计算属性的 getter
  reversedMessage: function () {
   // `this` 指向 vm 实例
   return this.message.split('').reverse().join('')
  }
 }
})

Ergebnis:

Ursprüngliche Nachricht: „Hallo“

Berechnete umgekehrte Nachricht : "olleH"

Hier deklarieren wir eine berechnete Eigenschaft reversedMessage. Die von uns bereitgestellte Funktion wird als Getter-Funktion der Eigenschaft vm.reversedMessage verwendet:

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

Sie können die Browserkonsole öffnen und die VM im Beispiel selbst ändern. Der Wert von

hängt immer vom Wert von vm.message ab. vm.reversedMessage

Sie können berechnete Eigenschaften wie normale Eigenschaften in Vorlagen binden. Vue weiß, dass

von vm.message abhängt. Wenn sich also vm.message ändert, werden auch alle Bindungen aktualisiert, die von vm.reversedMessage abhängen. Und das Beste daran ist, dass wir diese Abhängigkeit auf deklarative Weise erstellt haben: Die Getter-Funktion der berechneten Eigenschaft hat keine Nebenwirkungen, was das Testen und Verstehen erleichtert vm.reversedMessage

Berechnungseigenschaften-Caching vs. Methoden

Sie haben vielleicht bemerkt, dass wir den gleichen Effekt erzielen können, indem wir eine Methode innerhalb eines

Ausdrucks aufrufen:

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
 reversedMessage: function () {
  return this.message.split('').reverse().join('')
 }
}

Wir können dasselbe umwandeln. Eine Funktion ist definiert als a Methode statt einer berechneten Eigenschaft. Das Endergebnis ist tatsächlich in beide Richtungen genau das gleiche. Der Unterschied besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren Abhängigkeiten zwischengespeichert werden. Eine berechnete Eigenschaft wird nur dann neu bewertet, wenn sich die zugehörigen Abhängigkeiten ändern. Das bedeutet, dass, solange sich die Nachricht nicht geändert hat, mehrere Zugriffe auf die berechnete Eigenschaft „reversedMessage“ sofort das zuvor berechnete Ergebnis zurückgeben, ohne dass die Funktion erneut ausgeführt werden muss.

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

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

Im Gegensatz dazu wird jedes Mal, wenn ein erneutes Rendern ausgelöst wird, Durch den Aufruf einer Methode wird die Funktion immer erneut ausgeführt.

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

Berechnete Eigenschaften im Vergleich zu Listening-Eigenschaften

Vue bietet eine allgemeinere Möglichkeit, Datenänderungen auf Vue-Instanzen zu beobachten und darauf zu reagieren: Listening-Eigenschaften. Wenn Sie einige Daten haben, die sich ändern müssen, wenn sich andere Daten ändern, ist es leicht, Überwachungen zu missbrauchen – insbesondere, wenn Sie AngularJS zuvor verwendet haben. Allerdings ist es oft besser, berechnete Eigenschaften anstelle zwingender Überwachungsrückrufe zu verwenden. Betrachten Sie dieses Beispiel:

<p id="demo">{{ fullName }}</p>
var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar',
  fullName: 'Foo Bar'
 },
 watch: {
  firstName: function (val) {
   this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
   this.fullName = this.firstName + ' ' + val
  }
 }
})

Der obige Code ist zwingend und repetitiv. Vergleichen Sie dies mit der Version mit berechneten Eigenschaften:

var vm = new Vue({
 el: '#demo',
 data: {
  firstName: 'Foo',
  lastName: 'Bar'
 },
 computed: {
  fullName: function () {
   return this.firstName + ' ' + this.lastName
  }
 }
})

Viel besser, nicht wahr?

Setter für berechnete Eigenschaften

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

// ...
computed: {
 fullName: {
  // getter
  get: function () {
   return this.firstName + ' ' + this.lastName
  },
  // setter
  set: function (newValue) {
   var names = newValue.split(' ')
   this.firstName = names[0]
   this.lastName = names[names.length - 1]
  }
 }
}
// ...

Jetzt ausführen

, der Setter wird aufgerufen und vm.firstName und vm.lastName werden entsprechend aktualisiert.

vm.fullName = 'John Doe' Listener

Während berechnete Eigenschaften in den meisten Fällen besser geeignet sind, ist manchmal ein benutzerdefinierter Listener erforderlich. Aus diesem Grund bietet Vue mit der Watch-Option eine allgemeinere Möglichkeit, auf Datenänderungen zu reagieren. Dieser Ansatz ist am nützlichsten, wenn Sie bei Datenänderungen asynchrone oder teure Vorgänge ausführen müssen.

Beispiel:

<p id="watch-example">
 <p>
  Ask a yes/no question:
  <input v-model="question">
 </p>
 <p>{{ answer }}</p>
</p>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
 el: '#watch-example',
 data: {
  question: '',
  answer: 'I cannot give you an answer until you ask a question!'
 },
 watch: {
  // 如果 `question` 发生改变，这个函数就会运行
  question: function (newQuestion, oldQuestion) {
   this.answer = 'Waiting for you to stop typing...'
   this.getAnswer()
  }
 },
 methods: {
  // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
  // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
  // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
  // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
  // 请参考：https://lodash.com/docs#debounce
  getAnswer: _.debounce(
   function () {
    if (this.question.indexOf('?') === -1) {
     this.answer = 'Questions usually contain a question mark. ;-)'
     return
    }
    this.answer = 'Thinking...'
    var vm = this
    axios.get('https://yesno.wtf/api')
     .then(function (response) {
      vm.answer = _.capitalize(response.data.answer)
     })
     .catch(function (error) {
      vm.answer = 'Error! Could not reach the API. ' + error
     })
   },
   // 这是我们为判定用户停止输入等待的毫秒数
   500
  )
 }
})
</script>

Ergebnis:

Stellen Sie eine Ja/Nein-Frage:

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

In diesem Beispiel ermöglicht uns die Verwendung der Watch-Option, einen asynchronen Vorgang auszuführen (auf eine API zuzugreifen), die Häufigkeit der Ausführung des Vorgangs zu begrenzen und einen Zwischenwert

festzulegen, bevor wir den erhalten Endergebnis Status

. Dies sind Dinge, die berechnete Eigenschaften nicht leisten können.

Zusätzlich zur Watch-Option können Sie auch die imperative vm.$watch-API verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie React die Anmeldeüberprüfungskontrolle im React-Router-Routing implementiert

Der Routing-Schutz im Angular-Routing So verwenden Sie

Das obige ist der detaillierte Inhalt vonVon Vue berechnete Eigenschaften und praktischer Fallaustausch mit Hörern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!