Notions de base de Vue : introduction aux observateurs de Vue.js

Les observateurs peuvent être un outil puissant, mais ne doivent être utilisés que lorsqu’il n’existe pas de meilleure option. Examinons cela.

Les observateurs de Vue.js sont l’un des outils les plus puissants, l’un des plus flexibles mais aussi l’un des plus faciles à utiliser à mauvais escient.

Commençons par jeter un œil à ce qu’est un observateur.

Que sont les observateurs

Souvent, lorsque vous écrivez du code, vous vous retrouverez à regarder une propriété ou une valeur calculée et à souhaiter pouvoir faire quelque chose lorsque la propriété calculée ou de données changements de valeur.

Dans le monde Vue, nous regardons le faire quelque chose partie de la déclaration ci-dessus et appelez-la un effet secondaire.

Un exemple pratique (mais plutôt avancé) serait de regarder le fonctionnement d’un composant prop et utilisez Vue Router pour modifier l’URL actuelle. Dans cet exemple, le effet secondaire utiliserait Vue Router pour modifier l’URL actuelle chaque fois qu’un prop changements.

Un exemple plus simple serait d’observer la valeur liée d’un <select> élément et afficher une alerte programmée pour l’utilisateur l’informant que les modifications apportées à sa sélection ont été enregistrées.

Dans cet article, nous allons explorer le second, et j’ai volontairement décrit d’abord le scénario « complexe » car l’exemple sur lequel nous allons travailler peut être réécrit sans utiliser d’observateurs – ce qui est toujours préférable.

Ce que les observateurs ne sont pas

Les observateurs ne sont pas des propriétés calculées. Si jamais vous vous retrouvez à créer un observateur pour écrire la valeur d’une autre propriété, par exemple, vous devez d’abord vous demander s’il peut s’agir d’une propriété calculée.

C’est un piège courant. J’ai vu de nombreux développeurs, débutants comme experts, utiliser abusivement les observateurs lorsqu’une solution plus simple avec des propriétés calculées ou d’autres outils tels que le trading d’un v-model pour les auditeurs d’événements, cela aurait fait encore mieux le travail (nous y reviendrons plus tard).

Les observateurs sont un outil incroyable, et vous devrait utilisez-les, mais seulement lorsqu’aucun autre outil ne fera un meilleur travail. Le débogage et le suivi des observateurs sont bien plus compliqués qu’un outil tel que les propriétés calculées. Épargnez-vous, à vous et à vos collègues, des maux de tête et réfléchissez vraiment si en utiliser une est la bonne solution pour votre problème donné.

Comment utiliser un observateur

Afin d’apprendre à utiliser les observateurs, nous allons créer une démo du scénario que j’ai présenté plus tôt : chaque fois que l’utilisateur modifie la valeur d’une sélection, nous ferons comme si nous enregistrions cette valeur sur le backend et avertirions l’utilisateur que ses modifications ont été enregistrées. .

Nous allons commencer par présenter le HTML et configurer un v-model à la sélection afin que nous puissions garder une trace de la valeur sélectionnée par l’utilisateur.

<script>
export default {
  data: () => ({
    pet: 'cat',
    changesSaved: false
  })
}
</script>
<template>
  <header>
    <p v-if="changesSaved" style="border: 1px solid white; padding: 5px 10px; margin-bottom: 10px;">
      Your changes have been saved
    </p>
  </header>
  <main>
    <select v-model="pet">
      <option value="cat" :selected="value === 'cat'">Cat</option>
      <option value="dog" :selected="value === 'dog'">Dog</option>
      <option value="hamster" :selected="value === 'hamster'">Hamster</option>
    </select>
  </main>
</template>

Notez que le long du select J’ai ajouté un p balise à l’en-tête qui ne s’affichera qu’à chaque fois changesSaved est true.

Ce dont nous avons besoin, c’est de créer un effet secondaire. Chaque fois que la valeur de pet changements, nous voulons afficher quelque chose à l’utilisateur en conséquence.

Ajoutons un observateur pour cela.

<script>
export default {
  data: () => ({
    pet: 'cat',
    changesSaved: false
  }),
  watch: {
    pet (val, oldVal) {
      if (val === oldVal) return
      this.changesSaved = true
      setTimeout(() => {
        this.changesSaved = false
      }, 2000)
    }
  }
}
</script>
<template>
  <header>
    <p v-if="changesSaved" style="border: 1px solid white; padding: 5px 10px; margin-bottom: 10px;">
      Your changes have been saved
    </p>
  </header>
  <main>
    <select v-model="pet">
      <option value="cat" :selected="value === 'cat'">Cat</option>
      <option value="dog" :selected="value === 'dog'">Dog</option>
      <option value="hamster" :selected="value === 'hamster'">Hamster</option>
    </select>
  </main>
</template>

Lors de l’ajout d’un observateur, nous ajoutons une nouvelle propriété au watch objet dans les options de notre composant. Le nom de cette propriété doit correspondre le nom du data propriété ou computed propriété que nous essayons de surveiller – dans ce cas pet.

Chaque observateur recevra deux paramètres : le premier val avec la valeur vers laquelle la propriété surveillée change, et la seconde oldVal avec la valeur qu’il avait auparavant.

Pour faire bonne mesure, nous vérifions que val et oldVal ne sont pas les mêmes. Si c’est le cas, nous ne souhaitons pas afficher de notification pour l’utilisateur, nous return hors de la fonction.

Ensuite, nous modifions la valeur de changesSaved à true de sorte que la v-if La déclaration rend notre alerte à l’utilisateur sur l’écran. Notez que le setInterval L’instruction qui suit s’exécutera après 2 secondes (2000 ms), inversant la valeur de changesSaved retour à false.

Nous avons créé avec succès un observateur ! Pour une vérification rapide, nous pouvons toujours essayer de déterminer s’il existe un moyen de résoudre ce problème avec une propriété calculée, et en raison de la nature de la propriété setTimeout que nous souhaitons ajouter ici, cela ne serait pas possible autrement.

La meilleure façon

Au départ, je vous ai dit que le problème avec cet exemple était qu’il existait une autre façon de résoudre le problème sans observateurs. Je présenterai cette solution en utilisant une double liaison divisée sur le select comme la meilleure manière d’aborder le problème.

<script>
export default {
  data: () => ({
    pet: 'cat',
    changesSaved: false
  }),
  methods: {
    updatePet(event) {
      this.pet = event.target.value 
      this.changesSaved = true
      setTimeout(() => {
        this.changesSaved = false
      }, 2000)
    }
  }
}
</script>
<template>
  <header>
    <p v-if="changesSaved" style="border: 1px solid white; padding: 5px 10px; margin-bottom: 10px;">
      Your changes have been saved
    </p>
  </header>
  <main>
    <select :value="pet" @change="updatePet">
      <option value="cat" :selected="value === 'cat'">Cat</option>
      <option value="dog" :selected="value === 'dog'">Dog</option>
      <option value="hamster" :selected="value === 'hamster'">Hamster</option>
    </select>
  </main>
</template>

Pour ce scénario moins compliqué, la possibilité de fractionner le v-model dans value et @change est plus propre. Il n’y a pas d’observateurs difficiles à déboguer et le code est plus facile à suivre.

Emballer

Il peut y avoir des scénarios dans lesquels votre code nécessitera un observateur, et pour ces scénarios, nous ne pourrions pas demander un meilleur outil dans Vue. Les observateurs sont flexibles et puissants, mais leur coût de débogage est élevé et ils sont plus difficiles à comprendre en un coup d’œil.

Gardez cet outil à portée de main et demandez-vous toujours s’il existe une meilleure façon d’aborder le problème.