Muchas propiedades u objeto de propiedad: criterios de selección

Usando Vue, desarrollamos componentes de varios tipos y condiciones de uso. Una de las partes clave de cualquier componente es su interfaz. En Vue, las propiedades aprobadas son una parte muy importante, si no la más importante, de la interfaz del componente.

En una situación en la que un componente requiere una gran cantidad de datos, se pueden aplicar varios métodos para transferirlos. Considéralos.

Conjunto de propiedades

Una forma posible es crear una propiedad separada para cada valor atómico. Veamos el código del componente utilizando un enfoque similar:

Patrón

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

Guión

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

Veamos el uso de este componente.

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

Considere las ventajas y desventajas de este enfoque.

Los beneficios

• Todas las propiedades son independientes. Si uno de los valores no es válido, el mensaje de error será más preciso.
• El contenido de las propiedades transferidas es claramente
• "Plano es mejor que anidar"
• Agregar nuevas propiedades opcionales es bastante fácil: simplemente agregue una propiedad que use el 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' } } 

Desventajas

• Suficiente código detallado en el componente principal, especialmente cuando los datos se toman de un solo objeto. Un ejemplo:

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

• Verbosidad en la definición de propiedades (en comparación con la descripción del objeto)

Propiedad del objeto

Hay situaciones en que los datos atómicos no son tipos primitivos. En el ejemplo dado, dichos datos pueden ser un objeto person .

Considere un ejemplo:

Patrón

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

Guión

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

Veamos el 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 las ventajas y desventajas.

Los beneficios

• El código en el componente principal se acorta
• Si hay una determinada estructura de datos que no cambia, el código se vuelve menos redundante

Desventajas

• Todos los valores se unen por un objeto. Si uno de los valores no es válido, un mensaje de error indicará que todo el objeto no es válido.
• Cuando se utiliza un objeto en el componente principal: el contenido de los datos transmitidos se oculta detrás de la abstracción de este objeto.
• Un nivel adicional de anidamiento en el componente
• Agregar nuevas propiedades opcionales con valores dentro del objeto es imposible (no sé cómo hacerlo)
• Para validar un objeto en la misma medida, debe usar herramientas de validación adicionales (por ejemplo, biblioteca de validación de quartet )

Conclusiones

Llegué a las siguientes conclusiones:

• El uso de propiedades individuales es más preferible.
• El uso de una propiedad de objeto es permisible cuando la estructura de datos de este objeto no se repone con campos opcionales adicionales con un valor predeterminado.

P. S

Estaré encantado de conocer sus criterios de selección. ¿Qué enfoque utilizas y por qué? En otros asuntos, este es el propósito principal de escribir este artículo. ¿Puede alguno de ustedes conocer las mejores prácticas y sus razones? Gracias por su tiempo

Actualización 19:26, 16/01/2019

También hay una tercera opción, c v-bind. Ver discusión aquí