Introduction aux propriétés calculées de Vue.js

Les propriétés calculées peuvent étendre la réactivité afin qu’une valeur soit mise à jour lorsqu’une autre propriété change. Voyons comment cela fonctionne.

L’un des outils les plus puissants du framework Vue est sans doute les propriétés calculées. Ils nous permettent d’étendre le concept de réactivité en nous donnant un moyen d’exécuter des fonctions qui créent une nouvelle valeur en fonction de autre propriétés.

Dans le contexte de cet article, nous nous concentrerons sur la compréhension des propriétés calculées exclusivement dans l’API Options. Mais ne vous inquiétez pas : la façon dont les propriétés calculées fonctionnent sur l’API de composition est absolument la même avec une légère différence de syntaxe, donc tout ce que vous apprenez ici sera transféré proprement.

Qu’est-ce qu’une propriété calculée exactement ?

Avant de commencer à apprendre à utiliser les propriétés calculées, nous devons d’abord comprendre ce qu’elles sont et comment nous pouvons les utiliser dans notre code.

Prenons l’exemple du calcul de l’âge d’une personne en fonction de sa date de naissance. Dans le contexte de Vue, vous pouvez avoir soit un prop ou un data propriété contenant la date de naissance de la personne, alors commençons par là.

<template>
  <div>
    <input type="date" v-model="birthday" />
    
    <p>You are X years old</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    birthday: '2000-01-01'
  })
}
</script>

Nous stockons un data propriété appelée birthday et en utilisant un v-model pour lier la valeur du input à cela. Chaque fois que l’utilisateur modifie la date, elle sera stockée dans le birthday propriété de données.

Après la saisie, nous avons un <p> qui affichera le nombre d’années de la personne. Si vous ne connaissez pas les propriétés calculées, vous pourriez être tenté de créer un method pour calculer l’âge de la personne et l’afficher.

<template>
  <div>
    <input type="date" v-model="birthday" />
    
    <p>You are {{ calculateAge(birthday) }} years old</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    birthday: '2000-01-01'
  }),
  methods: {
    calculateAge(birthday) {
      return new Date(new Date() - new Date(birthday)).getFullYear() - 1970
    }
  }
}
</script>

Nous avons créé un calculateAge fonction qui prend un paramètre birthday et calcule le nombre d’années depuis cette date et aujourd’hui. Le résultat de ce calcul est ensuite imprimé par interpolation sur la ligne 5 pour afficher l’âge de l’utilisateur.

Même si cela « fonctionne », il s’agit d’une erreur très courante. Le problème avec cette approche est que chaque fois que l’application doit restituer le contenu du code HTML, elle devra recalculer la date d’anniversaire de l’utilisateur.

Dans une petite application avec une fonction simple comme celle-ci, cela n’aura certainement pas d’impact sur les performances, mais plus une application devient complexe, cela devient certainement une considération.

Ce que nous voulons, c’est une valeur qui est calculé chaque fois que une autre propriété change. Les propriétés calculées à la rescousse !

La bonne approche avec une propriété calculée

Prenons le code ci-dessus et transformons-le pour utiliser une propriété calculée à la place. Chaque fois que le birthday valeur changementscette propriété calculée devrait recalculer Sa valeur.

<template>
  <div>
    <input type="date" v-model="birthday" />
    <p>You are {{ userAge }} years old</p>
  </div>
</template>
<script>
export default {
  data: () => ({
    birthday: "2000-01-01",
  }),
  computed: {
    userAge() {
      return (
        new Date(new Date() - new Date(this.birthday)).getFullYear() - 1970
      );
    },
  },
};
</script>

Notez que nous avons entièrement supprimé la méthode : nous n’avons pas besoin de la conserver puisque toute la logique peut entrer en toute sécurité dans notre propriété calculée. La plupart des propriétés calculées incluront une bonne dose de logique. Ils utilisent une valeur (ou un ensemble de valeurs) d’une autre partie de votre composant et calculent un nouveau valeur.

Puisqu’il s’agit maintenant d’un calcul propriété nous le nommons comme nous le ferions pour une propriété de données, userAge au lieu de calculateAge. Notez que dans la ligne 4, l’interpolation est parfaitement logique.

Notez également qu’à la ligne 15 à l’intérieur de la propriété calculée, nous utilisons this. pour accéder au birthday propriété de données. Les propriétés calculées n’acceptent pas de paramètres.

Mais comment ça fonctionne?

Les propriétés calculées sont très intelligentes et savent comment elles se calculent. Comprendre les mécanismes internes qui alimentent cela dépasse le cadre de cet article, mais il suffit de comprendre que tout réactif les valeurs que nous utilisons dans une propriété calculée deviendront ses dépendances.

Dans ce cas, quand userAge a d’abord exécuté sa logique, il enregistre que la valeur réactive birthday a été utilisé. Maintenant, chaque fois birthday changements (puisqu’il s’agit d’une dépendance), il signalera le userAge propriété calculée à recalculer.

Notez que ces dépendances peuvent être n’importe quel type de valeur réactive, même d’autres propriétés calculées. Une propriété calculée peut également inclure plusieurs dépendances différentes, lorsque l’une d’entre elles est mise à jour, la propriété calculée sera recalculée.

Désormais, même si l’application devait restituer le p tag contenant notre propriété calculée, la fonction calculant l’âge de l’utilisateur pas doivent être réexécutés car les résultats des propriétés calculées sont mis en cache jusqu’à ce qu’une nouvelle exécution ait lieu. Cela signifie que si le calcul a donné un résultat de 35 la première fois, il affichera toujours la valeur mise en cache de 35 jusqu’à ce que l’anniversaire change. À ce stade, le calcul sera réexécuté et le nouveau résultat sera mis en cache à sa place.

Un piège important

À un moment donné, vous pourriez être tenté d’« écrire » une valeur dans une propriété calculée, disons par exemple :

methods: {
  submitUser () {
    // Round the user age to the nearest decade
    this.userAge = Math.round(this.userAge / 10) * 10)
  }
}

Tu devrais jamais muter une propriété calculée. N’oubliez pas que si vous devez calculer une valeur différente depuis une propriété calculée, vous pouvez toujours créer une autre propriété calculée à cet effet.

<template>
  <div>
    <input type="date" v-model="birthday" />
    <p>You are {{ userAge }} years old</p>
  </div>
</template>
<script>
export default {
  data: () => ({
    birthday: "2000-01-01",
  }),
  computed: {
    userAge() {
      return (
        new Date(new Date() - new Date(this.birthday)).getFullYear() - 1970
      );
    },
    userAgeRoundedToDecade () {
      return Math.round(this.userAge / 10) * 10
    }
  },
};
</script>

Maintenant, nous avons créé le userAgeRoundedToDecade propriété calculée, que nous pouvons utiliser partout où nous en avons besoin. Ce nouveau calcul a userAge comme dépendance, donc à tout moment birthday mises à jour, userAge sera mis à jour, ce qui à son tour rendra userAgeRoundedToDecade mise à jour. Ce type de changement est très courant et très puissant.

Emballer

Les propriétés calculées sont un outil incroyablement puissant dans Vue et très facile à utiliser.

Je dois cependant avouer qu’il y a est un moyen pour rendre une propriété calculée accessible en écriture via des getters/setters. Il s’agit d’une manière assez avancée de travailler avec des propriétés calculées et je ne la recommanderais pas tant que vous n’êtes pas absolument à l’aise avec Vue et que vous savez exactement comment et, plus important encore. pourquoi vous voulez l’utiliser. Ce n’est pas quelque chose que vous rencontrerez couramment, donc pas besoin de trop vous en soucier pour l’instant, sachez simplement que c’est une chose qui existe.