Berechnete Eigenschaften und Listener-Anwendungsfälle für VUE

Dieses Mal werde ich Ihnen die Anwendungsfälle der berechneten Eigenschaften und Listener von VUE vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung der berechneten Eigenschaften und Listener von VUE?

Vorne geschrieben

Bei der Verwendung von Vue im vorherigen Artikel ging es um VueLebenszyklus, Vue-Instanzen und Vorlagensyntax. Dieses Mal werden wir über die berechneten Eigenschaften und Listener von Vue sprechen.

Berechnete Eigenschaften

Die Ausdrücke in der Vorlage in Vue sind sehr praktisch, aber die ursprüngliche Absicht, sie zu entwerfen, ist es Wird für einfache Vorgänge verwendet. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel:

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

Hier ist die Vorlage keine einfache deklarative Logik mehr. Man muss es eine Weile betrachten, um zu erkennen, was dieser Code-String bewirkt, und es wird noch schwieriger zu handhaben, wenn man in einer Vorlage mehrmals darauf verweisen möchte.
Für jede komplexe Logik sollten Sie also berechnete Eigenschaften verwenden.

Zum Beispiel deklariert

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

hier eine berechnete Eigenschaft „reversedMessage“. Die von vue 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 berechnete Eigenschaften in Vorlagen wie normale Eigenschaften binden. Vue weiß, dass vm.reversedMessage 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 Vue diese Abhängigkeit auf deklarative Weise erstellt hat: Die Getter-Funktion der berechneten Eigenschaft hat keine Nebenwirkungen, was das Testen und Verstehen erleichtert.

Caching von berechneten Eigenschaften vs. Methoden

Sie haben vielleicht bemerkt, dass Vue den gleichen Effekt erzielen kann, indem es Methoden in Ausdrücken aufruft:

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

vue kann dieselbe A-Funktion zwischenspeichern ist als Methode und nicht als berechnete Eigenschaft definiert. 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 folgenden berechneten Eigenschaften nicht mehr aktualisiert werden, da Date.now() keine reaktive Abhängigkeit ist:

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

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

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:

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

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

Setter für berechnete Eigenschaften

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

Berechnete Eigenschaften verfügen standardmäßig nur über Getter, Sie können jedoch bei Bedarf auch einen Setter bereitstellen:

Wenn jetzt vm.fullName = 'John Doe' ausgeführt wird, wird der Setter aufgerufen und vm.firstName und vm.lastName werden entsprechend aktualisiert.

// ...
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]
    }
  }
}
// ...

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.

Zum Beispiel:

Ergebnis:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>
<!-- 因为 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: &#39;#watch-example&#39;,
  data: {
    question: &#39;&#39;,
    answer: &#39;I cannot give you an answer until you ask a question!&#39;
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = &#39;Waiting for you to stop typing...&#39;
      this.getAnswer()
    }
  },
  methods: {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {        if (this.question.indexOf(&#39;?&#39;) === -1) {
          this.answer = &#39;Questions usually contain a question mark. ;-)&#39;
          return
        }
        this.answer = &#39;Thinking...&#39;
        var vm = this
        axios.get(&#39;https://yesno.wtf/api&#39;)
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = &#39;Error! Could not reach the API. &#39; + error
          })
      },
      // 这是我们为判定用户停止输入等待的毫秒数      500
    )
  }
})
</script>

In diesem Beispiel ermöglicht uns die Verwendung der Watch-Option, einen asynchronen Vorgang auszuführen (auf eine API zuzugreifen) und die Häufigkeit dieser Ausführung zu begrenzen Operation und Einrichten von Zwischenzuständen, bevor wir zum Endergebnis gelangen. Dies sind Dinge, die berechnete Eigenschaften nicht leisten können.

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!

Verwandte Lektüre:

Vue-Lebenszyklus, Vue-Instanz, Vorlagensyntax

Front-End-WeChat-Freigabe-JSSDK-Konfiguration: ungültige Signatur falsch Signaturlösung

Erfahrung eines Front-End-Interviews

Das obige ist der detaillierte Inhalt vonBerechnete Eigenschaften und Listener-Anwendungsfälle für VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!