Propriétés calculées Vue.js

Découvrez comment vous pouvez utiliser Vue Computed Properties pour mettre en cache les calculs

Qu'est-ce qu'une propriété calculée

Dans Vue.js, vous pouvez afficher n'importe quelle valeur de données en utilisant des parenthèses:

<template>
  <p>{{ count }}</p>
</template>
<script>
export default {
data() {
return {
count: 1
}
}
}
</script>

Cette propriété peut héberger quelques petits calculs, par exemple

<template>
  {{ count * 10 }}
</template>

mais vous êtes limité à un seul JavaScriptexpression.

En plus de cette limitation technique, vous devez également tenir compte du fait que les modèles ne doivent concerner que l'affichage des données à l'utilisateur, et non effectuer des calculs logiques.

Pour faire quelque chose de plus une seule expression et pour avoir plus de modèles déclaratifs, utilisezpropriété calculée.

Les propriétés calculées sont définies dans lecomputedpropriété du composant Vue:

<script>
export default {
  computed: {
}
}
</script>

Un exemple de propriété calculée

Voici un exemple de code qui utilise une propriété calculéecountpour calculer la sortie. Avis:

Je n'ai pas eu besoin d'appelercount(). Vue.js appelle automatiquement la fonction

J'ai utilisé une fonction régulière (pas une fonction fléchée) pour définir lecountpropriété calculée car je dois pouvoir accéder à l'instance du composant viathis.

<template>
<p>{{ count }}</p>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3]
}
},
computed: {
count: function() {
return 'The count is ’ + this.items.length * 10
}
}
}
</script>

Propriétés calculées vs méthodes

Si tu sais déjàMéthodes Vue, vous vous demandez peut-être quelle est la différence.

Tout d'abord, les méthodes doivent être appelées, pas seulement référencées, vous devez donc appelercount()au lieu decountsi tu as uncountméthode:

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  methods: {
    count: function() {
      return 'The count is ' + this.items.length * 10
    }
  }
}
</script>

Mais la principale différence est queles propriétés calculées sont mises en cache.

Le résultat de lacountpropriété calculée est mise en cache en interne jusqu'à ce queitemsmodifications de la propriété des données.

Important: les propriétés calculées sontmis à jour uniquement lorsqu'une source réactive est mise à jour. Les méthodes JavaScript régulières ne sont pas réactives, un exemple courant consiste donc à utiliserDate.now():

<template>
  <p>{{ now }}</p>
</template>
<script>
export default {
computed: {
now: function () {
return Date.now()
}
}
}
</script>

Il sera rendu une fois, puis il ne sera pas mis à jour même lorsque le composant sera de nouveau rendu. Juste sur une actualisation de page, lorsque le composant Vue est fermé et réinitialisé.

Dans ce cas, une méthode est mieux adaptée à vos besoins.

Téléchargez mon gratuitManuel de Vue

Propriétés calculées Vue.js

Découvrez comment vous pouvez utiliser Vue Computed Properties pour mettre en cache les calculs

Qu'est-ce qu'une propriété calculée

Un exemple de propriété calculée

Propriétés calculées vs méthodes

Plus de tutoriels vue: