Many properties or object properties: selection criteria

We use Vue to develop components of various kinds and conditions of use. One of the key parts of any components is their interface. In Vue, the properties passed are a very important, if not the most important, part of the component's interface.

In a situation where a component requires a lot of data, you can apply several ways to transfer it. Consider them.

Property set

One of the possible ways is to create a separate property for each atomic value. Let's look at the component code using a similar approach:

Template

<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() } } } 

Look at using this component.

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

Consider the advantages and disadvantages of this approach.

Benefits

• All properties are independent. If one of the values ​​is invalid, the error message will be more accurate
• Visually the content of the transmitted properties
• "Flat is better than nested"
• Adding new optional properties is pretty easy: just add a property that uses the default parameter.

 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' } } 

disadvantages

• Enough verbose code in the parent component, especially when data is taken from a single object. Example:

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

• Verbosity in defining properties (compared to object description)

Object property

There are situations where atomic data is not of primitive types. In a given example, such data can be a person object.

Consider an example:

Template

 <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()) ) }) } } } 

Let's look at using:

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

Consider the advantages and disadvantages

Benefits

• The code in the parent component gets shorter.
• With a certain data structure that does not change, the code becomes less redundant.

disadvantages

• All values ​​become connected by one object. If one of the values ​​is invalid, an error message will indicate that the entire object is invalid.
• When using an object in the parent component: the content of the transmitted data is hidden behind the abstraction of this object.
• Additional level of nesting in the component
• Adding new optional properties with values ​​inside the object is impossible (I do not know how to do this)
• To validate an object to the same extent, you need to use additional validation tools (eg the quartet validation library)

findings

I came to the following conclusions:

• the use of individual properties is more preferable.
• The use of an object property is permissible when the data structure of this object is not replenished with additional optional fields with a default value.

P. S

I will be glad to know your selection criteria. What approach do you use and why? In other matters, this is the main purpose of writing this article. Can any of you know the best practices and their rationale? Thank you for your time.

Update 19:26, 1/16/2019

There is also a third option with v-bind. See the discussion here.