Explication détaillée de l'observateur en vue

Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, 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. Cet article présente principalement les informations pertinentes de watcher in vue. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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 le faire. surveillez l'attribut someProp, puis vue créera un objet observateur pour nous en interne. (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

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

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

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

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 :

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.

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

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.

Recommandations associées :

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

Problèmes avec les méthodes Vue et la gestion des événements

Quelles sont les instructions internes de Vue 2.0

Comment utiliser VUE sur le front-end

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!