Muitas propriedades ou objeto de propriedade: critérios de seleção

Usando o Vue, desenvolvemos componentes de vários tipos e condições de uso. Uma das partes principais de qualquer componente é sua interface. No Vue, as propriedades passadas são uma parte muito importante, se não a mais importante, da interface do componente.

Em uma situação em que um componente requer muitos dados, vários métodos para transferi-los podem ser aplicados. Considere-os.

Conjunto de propriedades

Uma maneira possível é criar uma propriedade separada para cada valor atômico. Vejamos o código do componente usando uma abordagem semelhante:

Padrão

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

Vejamos o uso deste componente.

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

Considere as vantagens e desvantagens dessa abordagem

Os benefícios

• Todas as propriedades são independentes. Se um dos valores for inválido, a mensagem de erro será mais precisa.
• O conteúdo das propriedades transferidas é claramente
• "Apartamento é melhor do que aninhar"
• Adicionar novas propriedades opcionais é bem fácil: basta adicionar uma propriedade que use o parâmetro 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' } } 

Desvantagens

• Código detalhado suficiente no componente pai, especialmente quando os dados são obtidos de um único objeto. Um exemplo:

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

• Verbosidade na definição de propriedades (em comparação com a descrição do objeto)

Propriedade do objeto

Há situações em que os dados atômicos não são tipos primitivos. No exemplo dado, esses dados podem ser um objeto pessoal.

Considere um exemplo:

Padrão

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

Vejamos o uso de:

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

Considere as vantagens e desvantagens

Os benefícios

• O código no componente pai fica mais curto
• Se houver uma certa estrutura de dados que não seja alterada, o código se tornará menos redundante

Desvantagens

• Todos os valores ficam vinculados por um objeto. Se um dos valores for inválido - uma mensagem de erro indicará que o objeto inteiro é inválido.
• Ao usar um objeto no componente pai: o conteúdo dos dados transmitidos fica oculto atrás da abstração desse objeto
• Um nível adicional de aninhamento no componente
• Adicionar novas propriedades opcionais com valores dentro do objeto é impossível (não sei como fazer isso)
• Para validar um objeto na mesma extensão, você precisa usar ferramentas de validação adicionais (por exemplo, biblioteca de validação de quartet )

Conclusões

Cheguei às seguintes conclusões:

• o uso de propriedades individuais é mais preferível.
• O uso de uma propriedade de objeto é permitido quando a estrutura de dados desse objeto não é reabastecida com campos opcionais adicionais com um valor padrão.

P. S

Ficarei feliz em saber seus critérios de seleção. Que abordagem você usa e por quê? Em outros assuntos, esse é o principal objetivo de escrever este artigo. Algum de vocês conhece as melhores práticas e sua lógica? Obrigado pelo seu tempo.

Atualização 19:26, 16/01/2019

Há também uma terceira opção, c v-bind. Veja a discussão aqui