De nombreuses propriétés ou propriété-objet: critères de sélection

En utilisant Vue, nous développons des composants de différents types et conditions d'utilisation. L'un des éléments clés de tout composant est son interface. Dans Vue, les propriétés transmises sont une partie très importante, sinon la plus importante, de l'interface du composant.

Dans une situation où un composant nécessite beaucoup de données, plusieurs méthodes de transfert peuvent être appliquées. Considérez-les.

Ensemble de propriétés

Une façon possible consiste à créer une propriété distincte pour chaque valeur atomique. Regardons le code du composant en utilisant une approche similaire:

Motif

<template> <div> <div>First name: {{ firstName }}</div> <div>Last name: {{ lastName }}</div> <div>Birth year: {{ birthYear }}</div> </div> </template> 

Script

 const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { firstName: { type: String, required: true, validator: firstName => firstName !== '' }, lastName: { type: String, required: true, validator: lastName => lastName !== '' }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() } } } 

Jetez un œil à l'utilisation de ce composant.

  <!-- Other part of html template--> <PersonInfo first-name="Jill" last-name="Smith" :birth-year="2000" /> <!-- Other part of html template--> 

Tenez compte des avantages et des inconvénients de cette approche

Les avantages

• Toutes les propriétés sont indépendantes. Si l'une des valeurs n'est pas valide, le message d'erreur sera plus précis.
• Le contenu des propriétés transférées est clairement
• "L'appartement est meilleur que l'emboîtement"
• L'ajout de nouvelles propriétés facultatives est assez simple: il suffit d'ajouter une propriété qui utilise le paramètre default

 props: { firstName: { type: String, required: true, }, lastName: { type: String, required: true, }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() }, city: { type: String, default: 'New York' } } 

Inconvénients

• Assez de code détaillé dans le composant parent, en particulier lorsque les données sont extraites d'un seul objet. Un exemple:

  <!-- Other part of html template--> <PersonInfo :first-name="person.firstName" :last-name="person.lastName" :birth-year="person.birthYear" /> <!-- Other part of html template--> 

• Verbosité dans la définition des propriétés (par rapport à la description de l'objet)

Propriété d'objet

Il existe des situations où les données atomiques ne sont pas des types primitifs. Dans l'exemple donné, ces données peuvent être un objet person .

Prenons un exemple:

Motif

 <template> <div> <div>First name: {{ person.firstName }}</div> <div>Last name: {{ person.lastName }}</div> <div>Birth year: {{ person.birthYear }}</div> </div> </template> 

Script

 import quartet from 'quartet' // npm validation package const v = quartet() const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { person: { type: Object, required: true, validator: v({ firstName: 'string', lastName: 'string', birthYear: v.and( 'safe-integer', v.min(MIN_BIRTH_YEAR), v.max(new Date().getFullYear()) ) }) } } } 

Examinons l'utilisation de:

  <!-- Other part of html template--> <PersonInfo :person="person"/> <!-- or (bad) --> <PersonInfo :person="{ firstName: 'Jill', lastName: 'Smith', birthYear: 2000 }"/> <!-- Other part of html template--> 

Tenez compte des avantages et des inconvénients

Les avantages

• Le code dans le composant parent raccourcit
• S'il existe une certaine structure de données qui ne change pas, le code devient moins redondant

Inconvénients

• Toutes les valeurs deviennent liées par un seul objet. Si l'une des valeurs n'est pas valide - un message d'erreur indiquera que l'objet entier n'est pas valide
• Lors de l'utilisation d'un objet dans le composant parent: le contenu des données transmises est caché derrière l'abstraction de cet objet
• Un niveau supplémentaire d'imbrication dans le composant
• L'ajout de nouvelles propriétés facultatives avec des valeurs à l'intérieur de l'objet est impossible (je ne sais pas comment faire)
• Pour valider un objet dans la même mesure, vous devez utiliser des outils de validation supplémentaires (par exemple une bibliothèque de validation de quartet )

Conclusions

Je suis arrivé aux conclusions suivantes:

• l'utilisation de propriétés individuelles est plus préférable.
• L'utilisation d'une propriété d'objet est autorisée lorsque la structure de données de cet objet n'est pas reconstituée avec des champs facultatifs supplémentaires avec une valeur par défaut.

P. S

Je serai heureux de connaître vos critères de sélection. Quelle approche utilisez-vous et pourquoi? Dans d'autres domaines, c'est le principal objectif de la rédaction de cet article. L'un de vous peut-il connaître les meilleures pratiques et leur justification? Merci pour votre temps.

Mise à jour 19:26, 16/01/2019

Il existe également une troisième option, c v-bind. Voir la discussion ici