So verwenden Sie den Watcher in Vue

Dieser Artikel stellt hauptsächlich die relevanten Informationen über Beobachter in Vue vor. Freunde, die sie benötigen, können darauf verweisen

Beobachtende Beobachter

Obwohl Berechnete Eigenschaften sind in den meisten Fällen besser geeignet, manchmal ist jedoch 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.

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 Änderungen in someProp-Attributen überwachen muss, also Vue wird intern ein Watcher-Objekt für uns erstellen. (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 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 jeweils drei Beobachter und beobachten Sie jeden Ausdruck von oben nach unten. Sie sind:

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

Die oben genannten drei Beobachter stellen drei Beobachter mit unterschiedlichen Funktionen dar. Wir unterteilen sie entsprechend ihrer Funktion in drei Kategorien >

• definiert in watch , ein Beobachter zur Überwachung von Eigenschaftsänderungen (der zweite)

• ein Beobachter für berechnete Eigenschaften (der erste)

• für Page Update Watcher (Dritter)

normal-watcher

Was Wir definieren in watch sind alle Es gehört zu diesem Typ, das heißt, solange sich die überwachten Eigenschaften ändern, wird die definierte Rückruffunktion ausgelöst

computed-watcher

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

Attribut b hängt von a ab , b wird nicht sofort neu berechnet. Erst wenn b später an anderer Stelle gelesen werden muss, wird es tatsächlich berechnet, d -watcher

Jede Komponente verfügt über ein . Wenn sich die Eigenschaften in data/computed ändern, wird der Render-Watcher aufgerufen, um die Ansicht der Komponente zu aktualisieren

render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }

Die Ausführungsreihenfolge der drei Beobachter

Zusätzlich zu den funktionalen Unterschieden haben diese drei Beobachter auch eine feste Ausführungsreihenfolge, die wie folgt lautet:

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

Diese Anordnung hat seinen Grund, so dass bei der Aktualisierung der Komponentenansicht so weit wie möglich gewährleistet werden kann, dass das berechnete Attribut bereits der neueste Wert ist, wenn der Render-Watcher an erster Stelle steht Durch das berechnete Rendern werden beim Aktualisieren der Seite die alten Daten als berechneter Wert verwendet.

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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird. Verwandte Artikel:

Über Reaktionsprinzipien in Vue (ausführliches Tutorial)

So implementieren Sie das dynamische Laden von Balkendiagrammen in AngularJS

So verwenden Sie den Bereich im Angular-Bereich

So verwenden Sie React, um die Menüberechtigungssteuerung zu implementieren

Detaillierte Interpretation, wie Requisiten Parameter in vue.js übergeben

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Watcher in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!