Propriétés calculées
Les propriétés calculées constituent un moyen de dériver de nouvelles données à partir de données réactives ; elles se mettent automatiquement à jour lorsque les données dont elles dépendent changent. Dans ofa.js, les propriétés calculées sont des méthodes spéciales définies dans l’objet proto, en utilisant les mots-clés get ou set de JavaScript.
Caractéristiques et avantages
- Mise en cache : Le résultat des propriétés calculées est mis en cache, et n'est recalculé que lorsque les données dont elles dépendent changent.
- Réactivité : Les propriétés calculées se mettent automatiquement à jour lorsque les données dépendantes sont mises à jour.
- Déclaratif : Déclarer les dépendances de manière déclarative rend le code plus clair et plus facile à comprendre.
get propriété calculée
get propriété calculée sert à dériver une nouvelle valeur à partir de données réactives ; elle n’accepte aucun paramètre et ne retourne qu’une valeur calculée à partir d’autres données.
La valeur de la propriété calculée countDouble est : {{countDouble}}
Exemple de scénario d'application pratique
Les propriétés calculées sont souvent utilisées pour gérer des logiques complexes de transformation de données, comme filtrer un tableau, formater le texte affiché, etc. :
- {{$data}}
set propriété calculée
La propriété calculée set vous permet de modifier l'état des données sous-jacentes par une opération d'affectation. Elle accepte un paramètre, généralement utilisé pour mettre à jour en sens inverse les données originales dont elle dépend.
Valeur de base : {{count}}
Valeur doublée : {{countDouble}}
Propriétés calculées vs méthodes
Bien que les méthodes puissent également réaliser des fonctions similaires, les propriétés calculées possèdent une caractéristique de mise en cache : elles ne sont réévaluées que lorsque les données dont elles dépendent changent, ce qui offre de meilleures performances.
// Utiliser une propriété calculée (recommandé) - avec cache
get fullName() {
return this.firstName + ' ' + this.lastName;
}
// Utiliser une méthode - exécutée à chaque appel
fullName() {
return this.firstName + ' ' + this.lastName;
}Points d'attention
- Éviter les opérations asynchrones : Les propriétés calculées doivent rester synchrones et sans effet secondaire. Il est interdit d'y effectuer des appels asynchrones ou de modifier directement l'état du composant.
- Suivi des dépendances : Veillez à ne dépendre que de données réactives, sinon les mises à jour seront imprévisibles.
- Protection contre les erreurs : Si une propriété calculée présente une dépendance cyclique ou une affectation anormale, cela peut entraîner un échec du rendu, voire une boucle infinie. Assurez-vous donc de définir à l'avance des conditions limites et de gérer correctement les exceptions.
Exemples d'applications pratiques
Voici un exemple simple de validation de formulaire qui montre l'utilité des propriétés calculées :
Exemple de validation simple
Statut : {{statusMessage}}