Comunicación vertical y ciclo de vida

El ciclo de vida de nuestro componentes

En Vue.js, los componentes siguen un ciclo de vida predefinido que consta de varias etapas. Cada etapa del ciclo de vida de un componente ofrece ganchos (hooks) que permiten ejecutar código en momentos específicos durante la vida útil del componente. A continuación, se muestra una descripción general de las etapas principales del ciclo de vida de un componente en Vue.js:

1. Creación: Durante esta etapa, se inicializa el componente y se establecen sus propiedades y estado inicial. Los ganchos de ciclo de vida relevantes en esta etapa son:
   • beforeCreate: Se ejecuta antes de que el componente sea creado. Las propiedades y el estado aún no están accesibles.
   • created: Se ejecuta una vez que el componente ha sido creado. Las propiedades y el estado están disponibles, y se pueden realizar tareas de inicialización adicionales.
2. Montaje: En esta etapa, el componente se adjunta al DOM y se renderiza. Los ganchos de ciclo de vida relevantes son:
   • beforeMount: Se ejecuta antes de que el componente se agregue al DOM. El DOM aún no está accesible.
   • mounted: Se ejecuta una vez que el componente ha sido agregado al DOM. El DOM es accesible y se pueden realizar operaciones de manipulación del DOM o interacciones con bibliotecas externas.
3. Actualización: Esta etapa ocurre cuando las propiedades del componente cambian o cuando se llama al método forceUpdate. Los ganchos de ciclo de vida relevantes son:
   • beforeUpdate: Se ejecuta antes de que el componente se vuelva a renderizar debido a cambios en las propiedades o estado.
   • updated: Se ejecuta después de que el componente ha sido actualizado y se ha vuelto a renderizar. Se pueden realizar tareas adicionales basadas en los cambios realizados.
4. Destrucción: En esta etapa, el componente se elimina del DOM y se limpian los recursos asociados. El gancho de ciclo de vida relevante es:
   • beforeDestroy: Se ejecuta antes de que el componente sea destruido y eliminado del DOM. El componente aún es accesible y se pueden realizar tareas de limpieza.
   • destroyed: Se ejecuta una vez que el componente ha sido destruido y eliminado del DOM. El componente ya no es accesible.

Además de estos ganchos principales, Vue.js también proporciona otros ganchos de ciclo de vida menos utilizados, como beforeUnmount y unmounted, que son equivalentes a beforeDestroy y destroyed, respectivamente, para versiones anteriores de Vue.js.

Es importante destacar que con la introducción de la API Composition en Vue 3, algunos de los ganchos de ciclo de vida mencionados anteriormente pueden tener nombres diferentes. Por lo tanto, si estás utilizando Vue 3 o posterior, te recomiendo consultar la documentación oficial de Vue.js para obtener información precisa sobre los ganchos de ciclo de vida en esa versión específica.

Diagrama del ciclo de vida

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'CycleOption',
	created() {
		console.log('Created');
	},
	mounted() {
		console.log('Mounted');
	},
	updated() {
		console.log('Updated');
	},
	unmounted() {
		console.log('Unmounted');
	},
});
</script>

<template>
	<div>Hola Mundo</div>
</template>

<script lang="ts" setup>
import { onMounted, onUpdated } from 'vue';

onMounted(() => {
	console.log('Mounted');
});

onUpdated(() => {
	console.log('Updated');
});
</script>

<style scoped></style>

Comunicación vertical

En el contexto de Vue.js, la comunicación vertical se refiere a la transferencia de datos o eventos entre componentes padre e hijo. Vue proporciona diferentes mecanismos para lograr esto de manera efectiva. Aquí hay algunas formas comunes de lograr la comunicación vertical en Vue:

1. Propiedades (props): Puedes pasar datos desde un componente padre a un componente hijo mediante el uso de props. El componente padre puede vincular propiedades a los atributos personalizados del componente hijo. De esta manera, el componente hijo puede acceder a los datos proporcionados por el padre. Aquí tienes un ejemplo:

En el componente padre:

<template>
  <div>
    <child-component :mensaje="mensaje"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      mensaje: 'Hola desde el componente padre',
    };
  },
};
</script>

En el componente hijo (ChildComponent.vue):

<template>
  <div>
    <p>{{ mensaje }}</p>
  </div>
</template>

<script>
export default {
  props: ['mensaje'],
};
</script>

2. Eventos personalizados: Puedes comunicarte desde un componente hijo hacia su componente padre emitiendo eventos personalizados. El componente hijo puede emitir un evento y el componente padre puede estar escuchando ese evento y responder en consecuencia. Aquí tienes un ejemplo:

En el componente hijo:

<template>
  <button @click="emitirEvento">Haz clic</button>
</template>

<script>
export default {
  methods: {
    emitirEvento() {
      this.$emit('mi-evento', 'Datos del evento');
    },
  },
};
</script>

En el componente padre:

<template>
  <div>
    <child-component @mi-evento="manejarEvento"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    manejarEvento(datos) {
      console.log(datos); // Datos del evento
    },
  },
};
</script>

Estas son solo algunas de las formas más comunes de lograr la comunicación vertical en Vue. Vue ofrece muchas más opciones, como el uso de una instancia de Vue compartida como bus de eventos o el uso de Vuex para administrar el estado de la aplicación de manera centralizada. La elección de la opción adecuada depende de la complejidad de tu aplicación y tus necesidades específicas.

Comuniación vertical decendente

La comunicación vertical se logra utilizando los eventos personalizados emits, permitiendo que los componentes hijos notifiquen al componente padre sobre eventos o cambios importantes.

Aquí tienes un ejemplo completo que muestra cómo utilizar los eventos personalizados (emits) en Vue para lograr la comunicación vertical:

En el componente padre:

<template>
  <div>
    <h2>Componente Padre</h2>
    <p>{{ mensaje }}</p>
    <ChildComponent @actualizar-mensaje="actualizarMensaje"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      mensaje: 'Hola desde el componente padre',
    };
  },
  methods: {
    actualizarMensaje(nuevoMensaje) {
      this.mensaje = nuevoMensaje;
    },
  },
};
</script>

En el componente hijo (ChildComponent.vue):

<template>
  <div>
    <h2>Componente Hijo</h2>
    <button @click="emitirEvento">Actualizar Mensaje</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitirEvento() {
      this.$emit('actualizar-mensaje', 'Nuevo mensaje desde el componente hijo');
    },
  },
};
</script>

En este ejemplo, el componente padre tiene una propiedad mensaje que se muestra en la plantilla. El componente hijo tiene un botón que, al hacer clic, emite un evento personalizado llamado actualizar-mensaje junto con un nuevo mensaje.

Cuando se emite el evento desde el componente hijo, el componente padre tiene un método actualizarMensaje que se ejecuta y actualiza la propiedad mensaje con el nuevo mensaje recibido. Como resultado, el mensaje en el componente padre se actualiza y se muestra en tiempo real.