Detaillierte Erläuterung der Berechnung von Vue.js und der Verwendung von Listener-Eigenschaften-js-Tutorial-php.cn

Dieses Mal erkläre ich Ihnen ausführlich die Vorsichtsmaßnahmen für die Berechnung und Verwendung der Listener-Eigenschaften von Vue.j Schauen Sie gemeinsam vorbei.

1. Übersicht

Berechnete Eigenschaften

Der

Ausdruck in der Vorlage ist sehr praktisch, aber Sie waren ursprünglich für einfache Berechnungen konzipiert. Wenn einer Vorlage zu viel Logik hinzugefügt wird, kann sie übergewichtig und schwer zu warten sein. Zum Beispiel:

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

Nach dem Login kopieren

Hier ist die Vorlage keine einfache deklarative Logik mehr. Sie müssen eine Weile zuschauen, bis Ihnen klar wird, dass Sie hier den umgedrehten

String der variablen Nachricht anzeigen möchten. Es wird schwieriger, damit umzugehen, wenn Sie die umgedrehte Zeichenfolge hier in der Vorlage mehrmals referenzieren möchten.

Für jede komplexe Logik sollten Sie also berechnete Eigenschaften verwenden.

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('')
  }
 }
})

Nach dem Login kopieren

Ergebnis:

Hier deklarieren wir ein berechnetes Attribut „reversedMessage“. Die von uns bereitgestellte Funktion wird als Getter-Funktion der Eigenschaft vm.reversedMessage

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

Nach dem Login kopieren

verwendet. Sie können berechnete Eigenschaften in der Vorlage genau 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 wir diese Abhängigkeit deklarativ erstellt haben: Die Getter-Funktion der berechneten Eigenschaft hat keine Nebenwirkungen, was das Testen und Verstehen erleichtert.

2. Berechneter Attribut-Cache vs. Methode

Sie haben vielleicht bemerkt, dass wir den gleichen Effekt erzielen können, indem wir Methoden in Ausdrücken aufrufen

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

Nach dem Login kopieren

Wir können dieselbe Funktion als Methode statt als berechnete Eigenschaft definieren. 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()
 }
}

Nach dem Login kopieren

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 ein Rechenattribut A, das einen relativ großen Leistungsaufwand hat. Es muss ein großes Array durchlaufen und viele Berechnungen durchführen. 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.

3. Berechnete Eigenschaften vs. Listening-Eigenschaften

Vue bietet eine allgemeinere Möglichkeit, Daten zu Vue-Instanzen zu beobachten und darauf zu reagieren. Geändert: Listening-Eigenschaften . Wenn Sie einige Daten haben, die geändert werden müssen, wenn sich

andere Daten ändern, ist es leicht, Überwachungen zu missbrauchen – insbesondere, wenn Sie zuvor AngularJS verwendet haben. Allerdings ist es oft besser, berechnete Eigenschaften anstelle zwingender Überwachungsrückrufe zu verwenden.

Denken Sie an 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
  }
 }
})

Nach dem Login kopieren

Der obige Code ist zwingend und repetitiv. Vergleichen Sie es 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
  }
 }
})

Nach dem Login kopieren

Ist es nicht viel besser?

4. Berechnete Eigenschaften-Setter

Berechnete Eigenschaften verfügen standardmäßig nur über Getter, Sie können jedoch 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]
  }
 }
}
// ...

Nach dem Login kopieren

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

五、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例如：

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

Nach dem Login kopieren

结果：当没有输入？号，那么显示如下：