Comment utiliser Watcher dans Vue

Cet article présente principalement les informations pertinentes sur les observateurs en vue. Les amis qui en ont besoin peuvent s'y référer

Observateurs observants

Bien que Les propriétés calculées sont plus adaptées dans la plupart des cas, mais un observateur personnalisé est parfois nécessaire. C'est pourquoi Vue propose un moyen plus général de répondre aux modifications de données via l'option de surveillance. Ceci est utile lorsque vous souhaitez effectuer des opérations asynchrones ou coûteuses en réponse à des modifications de données.

Tout le monde devrait être familier avec watch. Ils ont tous utilisé la méthode d'écriture suivante dans le projet :

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

La méthode d'écriture ci-dessus indique à vue que je dois surveiller les changements dans les attributs someProp, donc vue en interne Un objet watcher sera créé pour nous. (En raison du manque de place, nous ne parlerons pas de l'implémentation spécifique de watcher. Si vous êtes intéressé, vous pouvez directement consulter le code source de watcher)

Cependant, en vue, la fonction de watcher n'est pas si simple. Commençons par le 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>

Démo en ligne

Le code ci-dessus est très simple. Nous nous concentrons maintenant principalement sur les ._watchers imprimés dans le hook créé, comme suit :

Développez respectivement les trois observateurs et observez chaque expression de ce qui précède. Les éléments suivants sont :

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

Les trois observateurs ci-dessus représentent trois observateurs avec des fonctions différentes. Nous les divisons en trois catégories selon. à leurs fonctions :

• In L'observateur défini dans watch (le deuxième) pour surveiller les changements de propriétés

• L'observateur des propriétés calculées (le premier)

• observateur des mises à jour des pages (troisième)

observateur normal

Nous sommes en watch Defined, tous appartiennent à ce type, c'est-à-dire que tant que les propriétés surveillées changent, la fonction de rappel définie

calculed-watcher

render-watcher

Lorsque les propriétés dans data/computed render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }

L'ordre d'exécution des trois observateurs

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

Regardons le watcher en vue à partir d'un exemple de code

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

À propos des principes de réactivité dans Vue (tutoriel détaillé)

Comment implémenter le chargement dynamique de graphiques à barres dans AngularJS

Comment utiliser la portée dans la portée angulaire

Comment utiliser React pour implémenter le contrôle des autorisations de menu

Interprétation détaillée de la façon dont les accessoires transmettent les paramètres dans vue.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!