6 Buenas Prácticas para Desarrolladores Vue JS

Nube Colectiva

hace 5 años

En esta página:

A medida que Vue JS sigue creciendo, está surgiendo varias buenas prácticas que se están volviendo un estándar, estas buenas prácticas permiten que los proyectos y el código de los proyecto funcionen de manera óptima, si usas Vue JS en tus proyectos, en este Post te voy a compartir 6 consejos de buenas prácticas que puedes aplicarlas en tus próximos proyectos, vamos con el Post.

Antes de continuar con este Post te invito a leer todos los artículos referente a Vue JS en el siguiente enlace y eres nuevo en Vue JS te invito a leer el artículo Que es Vue JS, Historia y otros detalles.

Bien ahora veamos a continuación las mejores prácticas del trabajo con Vue JS.

Utiliza Kebab Case en los eventos

Cuando se trata de emitir eventos personalizados, siempre es mejor usar la nomenclatura Kebab o Kebab Case, esto porque el componente principal tiene la misma sintaxis que usamos para escuchar los eventos.

La nomenclatura Kebab usa guiones en medio para separar las palabras, puedes ver en el código el evento cerrar-ventana:


this.$emit('cerrar-ventana')

// Luego en el padre
<popup-window @cerrar-ventana='handleEvent()' />

this.$emit('cerrar-ventana')

// Luego en el padre

<popup-window @cerrar-ventana='handleEvent()' />

Entonces para mantener la coherencia entre nuestros componentes y para que el código sea más legible, utiliza Kebab Case en ambos lugares, es decir en el evento y en el componente.

Utiliza el atributo key con la directiva v-for

El uso del atributo key dentro de la directiva v-for ayuda a que una aplicación sea constante y predecible a la hora de manipular datos. Esto es necesario para que Vue JS pueda rastrear el estado de un componente, algo así como tener una referencia constante a los distintos elementos de una aplicación.


<!-- Mala Práctica -->
<div v-for='postre in postres'></div> 

<!-- Buena Práctica -->
<div v-for='postre in postres' :key='postre.id'>

Si no usas keys, Vue solo intentará hacer que el DOM sea lo más eficiente posible, esto significa que los elementos de una aplicación pueden aparecer fuera de orden o su comportamiento será menos predecible. Si le colocamos el atributo key a cada elemento, podremos predecir mejor como la aplicación manejará la manipulación del DOM.

Declara los Props con camelCase y usa Kebab Case en las plantillas

En programación camelCase es un estándar muy usado para declarar funciones y métodos, Vue JS soporta Kebab Case y camelCase así que no hay problema si usamos ambos formatos en nuestro código.


// Mala práctica 
<PopupWindow nombreWeb='nube colectiva' /> props: { 'nombre-web': String }

// Buena práctica 
<PopupWindow nombre-web='nube colectiva' /> props: { nombreWeb: String }

// Mala práctica

<PopupWindow nombreWeb='nube colectiva' /> props: { 'nombre-web': String }

// Buena práctica

<PopupWindow nombre-web='nube colectiva' /> props: { nombreWeb: String }

Los datos siempre deben devolver una función

Cuando declaramos datos de componentes, la opción de datos siempre debe devolver una función. Si no hacemos esto, simplemente devolvemos un objeto y los datos se compartirán en todas las instancias del componente.


// Mala práctica 
data: {
  nombre: 'Torta de Chocolate',
  ingredientes: []
}

// Mala práctica

data: {

nombre: 'Torta de Chocolate',

ingredientes: []

}

La mayoría de veces, se suele crear componentes reutilizables y queremos que cada componente devuelva un objeto único, esto lo podemos hacer devolviendo nuestro objeto dentro de una función.


// Buena práctica 
data () {
  return {
    nombre: 'Torta de Chocolate',
    ingredientes: [] 
  } 
}

// Buena práctica

data () {

return {

nombre: 'Torta de Chocolate',

ingredientes: []

}

No uses la directiva v-if con v-for en los elementos de un Array

Es muy fácil caer en la tentación de querer usar v-if con v-for cuando se quiere filtrar los elementos de una array.


<!-- Mala práctica --> 
<div v-for='postre in postres' v-if='postre.precio < 500'>

El problema con ello es que Vue JS prioriza la directiva sobre una directiva, recorre cada elemento y luego verifica la condición en el v-if.


this.postres.map(function (postre) {
  if (postre.precio < 500) {
    return precio
  }
})

this.postres.map(function (postre) {

if (postre.precio < 500) {

return precio

}

})

Esto significa que incluso si solo queremos renderizar algunos elementos de una lista, tendremos que recorrer todo el array. Esto no es bueno.

Una solución más inteligente sería iterar sobre Computed Properties, el ejemplo anterior ahora se vería de la siguiente manera.


<div v-for='postre in postresBaratos'>

computed: {
  postresBaratos: () => {
    return this.postres.filter(function (postre) {
      return postre.precio < 100
    })
  }
}

computed: {

postresBaratos: () => {

return this.postres.filter(function (postre) {

return postre.precio < 100

})

}

La solución anterior es una buena práctica, por las siguientes razones:

El renderizado es mucho más eficiente, porque no repetimos cada elemento en cada render.
El filtrado de una lista solo se volverá a analizar si una dependencia cambia.
Ayuda a separar la lógica del componente y la plantilla, haciendo que el componente sea más legible.

Crear los Props con buenas definiciones

Quizás es la mejor buena práctica que un Desarrollador debe seguir, ya que te salva de problemas futuros en tu aplicación. Al diseñar un proyecto a gran escala, es fácil olvidar olvidar el formato exacto, el tipo y otras convenciones que habíamos usado en nuestro código para los Props.

Y si se esta en un equipo de Desarrollo más grande, los otros Desarrolladores no son lectores que memorizan el código, así que déjales en claro como deben usar los componentes que has creado en el proyecto.


props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

props: {

status: {

type: String,

required: true,

validator: function (value) {

return [

'syncing',

'synced',

'version-conflict',

'error'

].indexOf(value) !== -1

}

Entonces ahorra a los otros Desarrolladores la molestia de tener que analizar minuciosamente tu componente para determinar el formato en que esta hecho el prop.

Conclusión

Los consejos de buenas prácticas que te comparto en este Post, intenta ponerlos en práctica y conforme los apliques, lograrás dominarlos, por ende tus proyectos estarán optimizados y con un funcionamiento adecuado.

Nota(s)

Algunos de los métodos y directivas pueden dejar de existir, ser modificados o continuar, esto no depende de mi, si no de los Desarrolladores que dan soporte a Vue JS.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.