Menu

Mejores Practicas en Vue

vue - February 06, 2019 por Carlos Rojas | Edita este Post.
Vue CLI3.2.1

A medida que vamos avanzando con nuestra App empezamos a tener ciertas dudas de que practicas utilizar en ciertos momentos, es por esto que he buscando algunas las cuales te pueden ser utiles.

Limpiar los event listeners en el destroy de los componentes con $off.

Cuando estes escuchando eventos con $on tenemos que recordar removerlos con $off en destroyed(). Para prevenir fugas de memoria.

Siempre usar kebab-case para nombres de eventos.

Cuando estemos emitiendo/escuchando eventos personalizados, deberiamos usar kebab-case porque igualmente van a ser convertidos a kebab-case.

// Emitiendo.
this.$emit('my-event') // instead of myEvent
// Escuchando.
v-on:my-event

Evita llamar el mismo metodo en created() y en watch.

Si necesitamos disparar un metodo en la inicialización de un componente y en el cambio de la propiedad, la practica comun es:

watch: {
  myProperty() {
    this.doSomething();
  }
},
created() {
  this.doSomething();
},
methods: {
  doSomething() {
     console.log('doing something...');
  }
},

pero es redundante, para esto podemos usar:

watch: {
  myProperty: {
    immediate: true, // forcing handler on initial status
    handler() {
      this.doSomething();
    }
  }
},
methods: {
  doSomething() {
     console.log('doing something...');
  }
},
// Even better solution
watch: {
  myProperty: {
    immediate: true, // forcing handler on initial status
    handler() {
      console.log('doing something...'); // No need to declare a function on methods for 1 use case
    }
  }
},

Siempre usar :key en ciclos v-for.

Siempre usar :key para tus ciclos en el template. Sino puede terminar en errores dificil de encontrar.

Nombres de props deberian usar CamelCase durante la declaración, pero kebab-case en plantillas.

Siguiendo las convenciones de los lenguajes: Javascript(CamelCase) y HTML(kebab-case) tiene sentido que un prop sea definido en camelCase en JS y usado en kebab-case en HTML.

Nunca usar v-if en el mismo elemento que v-for.

Esto es un problema de performance miremos lo siguiente:

<ul>
  <li
    v-for="game in games"
    v-if="game.isActive"
    :key="game.slug"
  >
    
  <li>
</ul>

esto sera traducido a.

this.games.map(function (game) {
  if (game.isActive) {
    return game.title
  }
})

Lo cual cambia el orden de complejidad.

Bueno esto es todo por ahora y espero que sea de ayuda :)

¡Compártelo!