Comprendre data(), l’interpolation et les propriétés calculées dans Vue.js / Blogs / Perficient

Créez-vous une application Vue.js dynamique et interactive et vous vous demandez comment gérer et afficher efficacement les données ? Dans ce guide, nous allons vous montrer comment stocker facilement des données, les afficher instantanément sur votre page avec l’interpolation de Vue et optimiser des calculs complexes avec des propriétés calculées. Ces fonctionnalités aideront votre application à fonctionner plus rapidement et plus facilement que jamais !

Qu’est-ce que les données() ?

• La fonction data() dans Vue est utilisée pour définir l’état réactif initial d’un composant.
• Les propriétés renvoyées par data() peuvent inclure différents types de valeurs, telles que des chaînes, des nombres, des tableaux ou des objets.

Points clés :

1. Réactivité: Lorsque vous définissez une propriété à l’intérieur du données() fonction, Vue suit automatiquement les modifications apportées à cette propriété. Chaque fois que les données changent, Vue mises à jour le DOMAINE automatiquement pour refléter les nouvelles valeurs.
2. Types de données : Le données() la fonction peut renvoyer n’importe quel type de données (chaînes, nombres, tableaux, objets), et ces types seront liés de manière réactive à votre modèle.

Comment utiliser les données()

La fonction data() doit renvoyer un objet, où chaque propriété est réactive. Cela signifie que toute modification des propriétés déclenchera des mises à jour automatiques du DOM.

Syntaxe:

<script>
export default {
data() {
return {
// Define your properties here
};
}
};
</script>

Exemple:

<script>
export default {
data() {
return {
message: "Welcome to Vue!",
name: "John",
count: 0
};
}
};
</script>

Dans cet exemple, trois propriétés :message, nom, et compter-sont définis dans le données() fonction. Chaque fois que ces propriétés changent, Vue met automatiquement à jour la vue pour refléter les nouvelles valeurs.

Interpolation

L’interpolation dans Vue.js est le processus d’injection de contenu dynamique dans votre modèle. Il vous permet d’afficher les données définies dans votre Fonction data() (ou propriétés calculées) directement au sein du HTMLen utilisant des doubles accolades : {{ }}.

But:

Contenu dynamique : L’interpolation est utilisée pour afficher des données dynamiques, telles que noms d’utilisateur, messages, numéros, etc. Cela élimine le besoin de mettre à jour manuellement le DOM chaque fois que les données changent.

Syntaxe:

<p>{{ message }}</p>

Exemple:

<template>
<div>
<p>{{ message }}</p>
<p>{{ name }}</p>
<p>{{ count }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>

• {{ message }} affiche la valeur de la propriété du message (« Bienvenue sur Vue ! »).
• {{ nom }} affiche la valeur du nom (« John »).
• {{ compter }} affiche la valeur du nombre (0).

Lorsque le composant est rendu, Vue remplace automatiquement les balises d’interpolation ({{ message }}, {{ nom }}, etc.) avec leurs valeurs correspondantes. Si une propriété de données change (par exemple, le compte est incrémenté), Vue met à jour le DOM sans nécessiter d’intervention manuelle.

Que sont les méthodes dans Vue.js ?

Dans Vue.js, méthodes sont des fonctions utilisées pour poignée événements ou des actions déclenchées par l’utilisateur, telles que des clics, des soumissions de formulaires ou d’autres interactions. Contrairement aux propriétés calculées, les méthodes ne sont pas mises en cache et seront réexécutées à chaque appel.

Comment utiliser les méthodes

Les méthodes sont définies dans la section méthodes d’un composant Vue et peuvent être invoquées en réponse à des événements.

Syntaxe:

<script>
export default {
methods: {
methodName() {
// Your logic here
}
}
};
</script>

Exemple:

<template>
<div>
<p>{{ message }}</p>
<p>{{ name }}</p>
<p>{{ count }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>

<script>
export default {
data() {
return {
message: "Welcome to Vue!",
name: "John",
count: 0
};
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>

Dans cet exemple, la méthode IncreaseCount est déclenchée lorsque le bouton est cliqué. Il incrémente la propriété count, qui met automatiquement à jour la vue.

Sortir:

Avant de cliquer sur le bouton : count = 0

Après avoir cliqué sur le bouton : nombre = 1

Calculé

Les propriétés calculées dans Vue.js sont des propriétés spéciales et réactives dérivées d’autres propriétés de données. Ils sont idéaux dans les cas où vous devez effectuer une transformation ou un calcul sur vos données avant de les afficher.

Pourquoi utiliser les propriétés calculées ?

• Les propriétés calculées sont mises en cache.
• Ils ne sont réévalués que lorsqu’une de leurs dépendances change.
• Ce mécanisme de mise en cache rend les propriétés calculées efficaces pour les données dérivées, car Vue n’a pas besoin de les recalculer à chaque rendu.
• D’un autre côté, les méthodes seront exécutées à chaque fois qu’elles seront invoquées, même si les données sous-jacentes n’ont pas changé, ce qui les rendra moins efficaces pour les tâches qui ne nécessitent pas de recalculs fréquents.

Syntaxe:

<script>
export default {
computed: {
computedProperty() {
// Computed logic here
}
}
};
</script>

Exemple:

<template>
  <div>
    <p>{{ countMessage }}</p>
    <button @click="increment">Click Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    countMessage() {
      return this.count > 5
        ? "You've clicked the button more than five times!"
        : "Keep clicking the button!";
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>

Sortir:

Après avoir cliqué sur le bouton plus de cinq fois

compteMessage est une propriété calculée qui change en fonction de la valeur de compter.
Quand le compte est supérieur à 5countMessage s’affichera « Vous avez cliqué sur le bouton plus de cinq fois ! ».

Pourquoi utiliser des propriétés calculées plutôt que des méthodes ?

• Efficacité: Les propriétés calculées sont mis en cache et ne réévaluez que lorsque leurs dépendances changent. Cela les rend plus efficaces, en particulier dans les modèles où ils sont consultés de manière répétée.
• Éviter les recalculs inutiles: Les méthodes sont appelées à chaque fois que le composant est restitué, ce qui peut entraîner des recalculs inutiles et des problèmes de performances potentiels. En revanche, les propriétés calculées ne sont réexécutées que lorsque les données dont elles dépendent changent, ce qui les rend plus efficaces pour les opérations sensibles aux performances.

Exemple de méthodes de comparaison :

<template>
  <div>
    <p>{{ countMessage() }}</p>
    <button @click="increment">Click Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    countMessage() {
      // Method returns a message based on the count
      return this.count > 5
        ? "You've clicked the button more than five times!"
        : "Keep clicking the button!";
    }
  }
};
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>

Dans ce cas, compteMessage() sera réexécuté à chaque fois que le composant est restitué, même si le nombre n’a pas changé, ce qui est moins efficace que l’utilisation d’une propriété calculée.

Sortir:

Après avoir cliqué sur le bouton plus de cinq fois

Quand utiliser data() par rapport aux propriétés calculées

1. Utiliser données() pour définir l’état principal de votre composant (par exemple, titre, message, nombre ou userInfo). Ce sont des propriétés que vous manipulerez et mettrez à jour directement.
2. Utiliser propriétés calculées pour les valeurs dérivées qui dépendent d’autres variables d’état. Par exemple, combiner prénom et nom de famille dans un nom et prénom, ou afficher un message conditionnel basé sur le nombre.

Conclusion

Dans Vue.js, la fonction data() est utilisée pour définir l’état réactif d’un composant, tandis que l’interpolation permet d’afficher des données dynamiques dans vos modèles. Les propriétés calculées constituent un moyen efficace de dériver des valeurs basées sur cet état, en optimisant les performances en mettant les résultats en cache. Ensemble, ces fonctionnalités facilitent la création d’applications dynamiques et réactives qui mettent automatiquement à jour l’interface utilisateur sans manipulation manuelle du DOM.