Analyse des cas d'utilisation des auditeurs dans Vue.js

Cette fois, je vais vous apporter une analyse des cas d'utilisation de l'écouteur dans Vue.js. Quelles sont les précautions lors de l'utilisation de l'écouteur dans Vue.js. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

Montre d'écoute Vue

Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, un appareil d'écoute personnalisé est parfois nécessaire. C'est pourquoi Vue propose un moyen plus général de répondre aux changements de données via l'option de surveillance. Cette approche est particulièrement utile lorsque vous devez effectuer des opérations asynchrones ou coûteuses lorsque les données changent. Par exemple :

<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this // this重定向
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为判定用户停止输入等待的毫秒数
500
)
}
})
</script>

Utilisation avancée de l'écouteur (montre)

Supposons que vous ayez le code suivant :

<p>
  <p>FullName: {{fullName}}</p>
  <p>FirstName: <input type="text" v-model="firstName"></p>
</p>
new Vue({
 el: '#root',
 data: {
 firstName: 'Dawei',
 lastName: 'Lou',
 fullName: ''
 },
 watch: {
 firstName(newName, oldName) {
  this.fullName = newName + ' ' + this.lastName;
 }
 } 
})

L'effet du code ci-dessus est que lorsque nous entrons firstName, wacth surveille la nouvelle valeur de chaque modification, puis calcule et affiche fullName.

Méthode de gestion et attribut immédiat

Une caractéristique de la montre ici est qu'elle ne sera pas exécutée lorsqu'elle est initialement liée, mais le sera attendez que les calculs de surveillance firstName soient effectués uniquement lorsque des changements se produisent. Et si nous voulons exécuter le changement lorsqu’il est initialement lié ? Nous devons modifier notre méthode d'écriture de surveillance. Le code de surveillance modifié est le suivant :

watch: {
 firstName: {
 handler(newName, oldName) {
  this.fullName = newName + ' ' + this.lastName;
 },
 // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
 immediate: true
 }
}

Avez-vous remarqué le gestionnaire ? Nous avons lié une méthode de gestionnaire à firstName. par défaut. C'est le gestionnaire, Vue.js gérera cette logique, et la version finale compilée est en fait ce gestionnaire.

Et immédiat : true signifie que si firstName est déclaré dans wacth, la méthode du gestionnaire à l'intérieur sera exécutée immédiatement si elle est fausse, l'effet sera le même que notre précédent, et il ne sera pas exécuté. pendant la liaison.

attribut profond

Il existe également un attribut profond dans watch La valeur par défaut est false, qui indique s'il faut surveiller en profondeur par exemple. , il y en a un dans notre attribut data obj :

<p>
  <p>obj.a: {{obj.a}}</p>
  <p>obj.a: <input type="text" v-model="obj.a"></p>
</p>
new Vue({
 el: '#root',
 data: {
 obj: {
  a: 123
 }
 },
 watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true
 }
 } 
})

Lorsque nous entrons dans la vue des données dans la zone de saisie pour modifier la valeur de obj.a, nous constatons qu'elle n'est pas valide. En raison des limitations du JavaScript moderne (et du Object.observe obsolète), Vue ne peut pas détecter l'ajout ou la suppression de propriétés d'objet. Étant donné que Vue effectue le processus de conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit exister sur l'objet de données pour que Vue la convertisse afin qu'elle soit réactive.

Par défaut, le gestionnaire n'écoute que les changements dans la référence de l'attribut obj. Il n'écoutera que lorsque nous attribuons une valeur à obj. Par exemple, nous réaffectons obj dans la fonction hook d'événement montée :

mounted: {
 this.obj = {
 a: '456'
 }
}

De cette façon, notre gestionnaire sera exécuté et obj.a modifié sera imprimé.

Au contraire, que se passe-t-il si nous devons surveiller la valeur de l'attribut a dans obj ? C’est à ce moment-là que l’attribut profond devient utile !

watch: {
 obj: {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 deep: true
 }
}

Profond signifie une observation approfondie. L'écouteur traversera couche par couche et ajoutera cet écouteur à toutes les propriétés de l'objet. Cependant, la surcharge de performances sera très importante. Toute modification d'une propriété dans obj. déclenchera le gestionnaire dans cet écouteur.

Optimisation, nous pouvons utiliser le formulaire

chaîne pour surveiller.

watch: {
 'obj.a': {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 // deep: true
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Un résumé de la méthode d'utilisation de JS pour déterminer le contenu contenu dans une chaîne

JS + Liaison de souris réelle HTML5 Animation de particules d'événements

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!