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

<🎜 sera déclenché. >Chaque attribut calculé finira par générer un objet watcher correspondant, mais ce type de watcher a une caractéristique Prenons b ci-dessus comme exemple :

L'attribut b dépend. sur a. Quand a change, b ne sera pas recalculé immédiatement. Ce n'est que lorsque b devra être lu ailleurs qu'il sera réellement calculé, c'est-à-dire qu'il a des caractéristiques paresseuses (calcul paresseux).

render-watcher

Chaque composant aura un

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

changeront, le render-watcher sera appelé. pour mettre à jour la vue du composant

L'ordre d'exécution des trois observateurs

En plus des différences fonctionnelles, ces trois observateurs ont également des ordres d'exécution fixes , qui sont :

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

Il y a une raison à cet arrangement, afin qu'il puisse être garanti autant que possible que lors de la mise à jour de la vue du composant, l'attribut calculé est déjà la dernière valeur If render-. L'observateur est classé devant le rendu calculé, cela entraînera la mise à jour de la page. La valeur calculée correspond aux anciennes données.

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

Dans cet exemple, l'utilisation de l'option watch nous permet d'effectuer des opérations asynchrones opérations (accéder à une API), limiter la fréquence à laquelle nous effectuons l'opération et définir des états intermédiaires avant d'obtenir le résultat final. C'est quelque chose que les propriétés calculées ne peuvent pas faire.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

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