Ausführliche Erklärung des Beobachters in Vue

Während berechnete Eigenschaften in den meisten Fällen besser geeignet sind, ist manchmal ein benutzerdefinierter Beobachter erforderlich. Aus diesem Grund bietet Vue mit der Watch-Option eine allgemeinere Möglichkeit, auf Datenänderungen zu reagieren. Dies ist nützlich, wenn Sie als Reaktion auf Datenänderungen asynchrone oder teure Vorgänge ausführen möchten. In diesem Artikel werden hauptsächlich relevante Informationen für Beobachter in Vue vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.

Jeder sollte mit watch vertraut sein. Sie alle haben im Projekt die folgende Schreibmethode verwendet:

watch: {
 someProp () {
  // do something
 }
}
// 或者
watch: {
 someProp: {
  deep: true,
  handler () {
   // do something
  }
 }
}

Die obige Schreibmethode sagt Vue, dass ich es tun muss Überwachen Sie das SomeProp-Attribut. Dann erstellt Vue intern ein Watcher-Objekt für uns. (Aus Platzgründen werden wir nicht auf die spezifische Implementierung von Watcher eingehen. Wenn Sie interessiert sind, können Sie sich direkt den Quellcode von Watcher ansehen.)

In Vue ist die Funktion von Watcher jedoch nicht vorhanden so einfach. Beginnen wir mit dem Code:

<template>
 <p>
  <p>a: {{ a }}</p>
  <p>b: {{ b }}</p>
  <button @click="increment">+</button>
 </p>
</template>
<script>
export default {
 data () {
  return {
   a: 1
  }
 },
 computed: {
  b () {
   return this.a * 2
  }
 },
 watch: {
  a () {
    console.log(&#39;a is changed&#39;)
  }
 },
 methods: {
  increment () {
   this.a += 1
  }
 },
 created () {
  console.log(this._watchers)
 }
}
</script>

Online-Demo

Der obige Code ist jetzt hauptsächlich auf this._watchers gedruckt, wie folgt:

Erweitern Sie die drei Beobachter und beobachten Sie jeden Ausdruck von oben:

b() {   return this.a * 2;↵  }
"a"
function () {   vm._update(vm._render(), hydrating);↵  }

Die drei Beobachter oben stellen drei Beobachter mit unterschiedlichen Funktionen dar zu ihren Funktionen:

• In Der in watch definierte Beobachter (der zweite) zur Überwachung von Eigenschaftsänderungen

• Der Beobachter für berechnete Eigenschaften (der erster)

• Beobachter für Seitenaktualisierungen (dritter)

Normalbeobachter

Wir sind in watch Definiert, alle gehören zu diesem Typ, das heißt, solange sich die überwachten Eigenschaften ändern, ist die definierte Rückruffunktion

computed-watcher

Jedes berechnete Attribut generiert schließlich ein entsprechendes Watcher-Objekt, aber dieser Typ von Watcher hat ein Merkmal von b oben:

Attribut b hängt davon ab auf a. Wenn sich a ändert, ändert sich b nicht. Nur wenn b an anderer Stelle gelesen werden muss, wird es tatsächlich berechnet, das heißt, es weist verzögerte (verzögerte) Berechnungseigenschaften auf.

Render-Watcher

Jede Komponente hat einen render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }. Wenn sich die Eigenschaften in data/computed

ändern, wird der Render-Watcher aufgerufen um die Ansicht der Komponente zu aktualisieren

Die Ausführungsreihenfolge der drei Beobachter

Zusätzlich zu den funktionalen Unterschieden haben diese drei Beobachter auch feste Ausführungsreihenfolgen , die sind:

computed-render -> normal-watcher -> render-watcher

Es gibt einen Grund für diese Anordnung, damit beim Aktualisieren der Komponentenansicht so weit wie möglich gewährleistet werden kann, dass das berechnete Attribut bereits der neueste Wert ist. Wenn der Watcher vor dem berechneten Rendering steht, wird die Seite aktualisiert. Der berechnete Wert sind die alten Daten.

Sehen wir uns den Watcher in Vue anhand eines Beispielcodes an

In diesem Beispiel ermöglicht uns die Verwendung der Watch-Option eine asynchrone Ausführung Operationen (Zugriff auf eine API), begrenzen, wie oft wir die Operation ausführen, und legen Zwischenzustände fest, bevor wir das Endergebnis erhalten. Dies ist etwas, was berechnete Eigenschaften nicht leisten können.

<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>
<!-- Since there is already a rich ecosystem of ajax libraries -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also -->
<!-- gives you the freedom to just use what you&#39;re familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/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) {
this.answer = &#39;Waiting for you to stop typing...&#39;
this.getAnswer()
}
},
methods: {
 // _.debounce 是一个通过 lodash 限制操作频率的函数。
 // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
 // ajax请求直到用户输入完毕才会发出
 // 学习更多关于 _.debounce function (and its cousin
// _.throttle), 参考: https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
var vm = this
if (this.question.indexOf(&#39;?&#39;) === -1) {
vm.answer = &#39;Questions usually contain a question mark. ;-)&#39;
return
}
vm.answer = &#39;Thinking...&#39;
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>

Verwandte Empfehlungen:

Probleme mit Vue-Methoden und Ereignisbehandlung

Was sind die internen Anweisungen in Vue 2.0

So verwenden Sie VUE im Frontend

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des Beobachters in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!