Vue.js es un framework JavaScript popular que a tomado un hueco en los últimos años junto a Angular y React que eran los dominantes al ser un framework rápidos y con una curva de aprendizaje menor al de estos frameworks y progresivo.

 

Vue esta diseñado para construir aplicaciones web interactivas y dinámicas. En esta publicación, vamos a explorar siete patrones de Vue que deberías considerar usar más a menudo en tus proyectos.

1. Componentes Estáticos Eficientes con “v-once”

Cuando tienes componentes con contenido estático que no cambia, puedes utilizar la directiva “v-once”. Esto evita que Vue vuelva a renderizar el componente innecesariamente, mejorando el rendimiento, es decir, que Vue lo reenderiza una sola vez y no es recargado más en el DOM por Vue.

<template>
  <div v-once>
    <!-- Contenido estático aquí -->
  </div>
</template>

2. Comunicación entre Componentes con Eventos Personalizados

En lugar de emplear únicamente de las propiedades y eventos incorporados de Vue, podemso crear  eventos personalizados para una comunicación más directa entre componentes, esto es extremadamente útil para evitar recargar todo el componente hijo o pasar propiedades ha esre cuando algo cambie y necesitamos recargar al hijo..

<!-- En el componente hijo -->
<button @click="$emit('mi-evento')">Disparar Evento</button>

<!-- En el componente padre -->
<mi-componente @mi-evento="manejarEvento"></mi-componente>

3. Uso Inteligente de “v-if” y “v-show”

“v-if” y “v-show” son directivas para mostrar u ocultar elementos. “v-if” elimina completamente el elemento del DOM, mientras que “v-show” solo lo oculta visualmente. Elige la opción adecuada según las necesidades del desarrollo actual.

4. Reutilización de Lógica con Mixins

Los mixins son objetos que contienen lógica reutilizable que puedes compartir entre varios componentes. Úsalos para evitar duplicación de código y mantener tu aplicación más modular, con los mixins, podemos evitar crear todo en el componente padre para que luego tenga que ser accesido mediante los componentes hijos mediante el $root.

// Ejemplo de mixin
const miMixin = {
  methods: {
    saludar() {
      console.log('¡Hola desde el mixin!');
    }
  }
};

// En un componente
export default {
  mixins: [miMixin],
  // ...
};

5 Inyección de dependencias

La inyección de dependencia con Provide/Inject permiten que dos componentes se comuniquen en Vue este par de opciones se utilizan juntas para permitir que un componente ancestro sirva como inyector de dependencia para todos sus descendientes, independientemente de cuán profunda sea la jerarquía de componentes, siempre que estén en la misma cadena principal. Si está familiarizado con React, esto es muy similar a la función de contexto de React.

// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

6. Manejo de Formularios con “v-model”

La directiva “v-model” no puede faltar y permite establecer una variable reactiva de Vue en un campo de formulario, con esto, tenemos una comunicación fullduplex entre los cambios realizados en el campo de formulario y la variable reactiva.

<template>
  <input v-model="nombre" />
</template>

<script>
export default {
  data() {
    return {
      nombre: ''
    };
  }
};
</script>

7. Optimización de Rendimiento con “key”

Cuando renderizas listas de elementos, agrega una clave única con la directiva “key” para ayudar a Vue a identificar los cambios y optimizar el rendimiento.

<template>
  <ul>
    <li v-for="item in lista" :key="item.id">{{ item.nombre }}</li>
  </ul>
</template>

8. Uso de Slots para Componer Componentes Flexibles

Los slots permiten componer componentes de manera flexible, permitiendo que el contenido se inserte dinámicamente dentro de un componente.

<!-- En el componente padre -->
<mi-componente>
  <p>Contenido personalizado aquí</p>
</mi-componente>

<!-- En el componente hijo -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

9. Modificadores de eventos y claves

Existe varios modificadores que podemos emplear para personalizar los eventos de teclado .passive, .capture y .once, Vue ofrece prefijos que se pueden usar con:

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

Artículo recomendado:

https://medium.com/js-dojo/7-vue-patterns-that-you-should-be-using-more-often-b13cde4d2ae6