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

computed-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);↵ }

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

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>