Hooks del ciclo de vida de Vue3

Las funciones de hooks del ciclo de vida en Vue.js son una serie de métodos que Vue llama automáticamente durante el proceso de creación, actualización y destrucción de la instancia del componente. En estos pasos, el componente activa una serie de funciones llamadas 'hooks del ciclo de vida', que permiten a los desarrolladores ejecutar código personalizado en momentos específicos.

Registro y uso de los hooks del ciclo de vida

Hook mounted: este hook se activa después de que el componente completa el renderizado inicial y genera los nodos DOM. Por ejemplo:

export default {
  mounted() {
    console.log(`组件已挂载。`);
  }
}

Otros hooks comunes: además de mounted, también hay hooks como updated y unmounted, que se llaman en diferentes etapas del ciclo de vida de la instancia.

Precauciones sobre los hooks del ciclo de vida

Contexto de this:El this en todas las funciones de hooks del ciclo de vida apunta automáticamente a la instancia del componente que lo invoca.

Evita usar funciones flecha:Al definir hooks del ciclo de vida, no uses funciones flecha, porque esto impide acceder a la instancia del componente a través de this.

Al usar adecuadamente los hooks del ciclo de vida, los desarrolladores pueden ejecutar lógica específica en diferentes etapas del componente, mejorando la flexibilidad y funcionalidad del componente.

A continuación se muestra el diagrama del ciclo de vida de la instancia:

A continuación se presentan las funciones de hooks del ciclo de vida de Vue.js

Nombre del hookMomento de activación
beforeCreateSe llama después de la inicialización de la instancia y antes de la observación de datos y la configuración de eventos.
createdSe llama inmediatamente después de que la instancia se haya creado; en este momento, la instancia ya ha completado la observación de datos, el cálculo de propiedades y métodos, y las devoluciones de llamada de watch/event.
beforeMountSe llama antes de que comience el montaje: la función render correspondiente se llama por primera vez.
mountedelpor el recién creadovm.$elreemplazado y montado en la instancia, luego se llama a este hook.
beforeUpdateSe llama cuando se actualizan los datos, antes de que el DOM virtual se vuelva a renderizar y se apliquen parches.
updatedSe llama después de que el DOM virtual se vuelva a renderizar y se apliquen parches debido a cambios en los datos.
beforeUnmountSe llama antes de que la instancia se desmonte.
unmountedSe llama después de que la instancia se haya desmontado.

A continuación se presenta una introducción detallada a los hooks del ciclo de vida de los componentes de Vue:

Las funciones de hooks del ciclo de vida en Vue.js son una serie de métodos que Vue llama automáticamente durante el proceso de creación, actualización y destrucción de la instancia del componente. A través de estas funciones de hooks, se pueden ejecutar operaciones específicas en diferentes etapas del ciclo de vida del componente. A continuación se presenta una introducción detallada a los hooks del ciclo de vida de los componentes de Vue:

1. beforeCreate

  • Descripción: se llama después de la inicialización de la instancia, antes de la observación de datos y la configuración de eventos.
  • Uso: en esta etapa se pueden inicializar algunos datos que no están siendo proxyados por Vue.

Ejemplo:

Ejemplo

beforeCreate() {
  console.log('beforeCreate:La instancia acaba de ser creada');
}

2. created

  • Descripción: se llama inmediatamente después de que la instancia se haya creado; en este momento, la instancia ya ha completado la siguiente configuración: observación de datos, cálculo de propiedades y métodos, devoluciones de llamada de watch/event; la etapa de montaje aún no ha comenzado.
  • Uso: en esta etapa se puede acceder a los datos y modificarlos, pero el DOM aún no se ha montado.

Ejemplo:

Ejemplo

created() {
  console.log('created:La instancia se ha creado');
}

3. beforeMount

  • Descripción: se llama antes de que comience el montaje: la función render correspondiente se llama por primera vez.
  • Uso: realizar algunas operaciones antes del montaje, como modificar la estructura del DOM, etc.

Ejemplo:

Ejemplo

beforeMount() {
  console.log('beforeMount:Antes de que comience el montaje');
}

4. mounted

  • Descripción: elpor el recién creadovm.$elreemplazado y montado en la instancia, luego se llama a este hook.
  • Uso: en esta etapa se puede manipular el DOM y ejecutar lógica relacionada con el DOM.

Ejemplo:

Ejemplo

mounted() {
  console.log('mounted:La instancia se ha montado');
}

5. beforeUpdate

  • Descripción: se llama cuando se actualizan los datos, antes de que el DOM virtual se vuelva a renderizar y se apliquen parches.
  • Uso: en esta etapa se puede acceder al estado anterior a la actualización.

Ejemplo:

Ejemplo

beforeUpdate() {
  console.log('beforeUpdate:Antes de la actualización de datos');
}

6. updated

  • Descripción: se llama después de que el DOM virtual se vuelva a renderizar y se apliquen parches debido a cambios en los datos.
  • Uso: en esta etapa se puede manipular el DOM, pero evita cambiar los datos durante este período, ya que podría provocar un bucle infinito de actualizaciones.

Ejemplo:

Ejemplo

updated() {
  console.log('updated:Actualización de datos completada');
}

7. beforeUnmount（Vue 3）

  • Descripción: se llama antes de que la instancia se desmonte.
  • Uso: realizar algunas operaciones de limpieza antes de que la instancia se desmonte, como cancelar la escucha de eventos, etc.

Ejemplo:

Ejemplo

beforeUnmount() {
  console.log('beforeUnmount:Antes de que la instancia se desmonte');
}

8. unmounted（Vue 3）

  • Descripción: se llama después de que la instancia se haya desmontado.
  • Uso: realizar algunas operaciones de limpieza después de que la instancia se haya desmontado, como destruir temporizadores, etc.

Ejemplo:

Ejemplo

unmounted() {
  console.log('unmounted:La instancia se ha desmontado');
}

Orden de ejecución de los hooks del ciclo de vida

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate (se activa cuando cambian los datos)
  6. updated (se activa cuando cambian los datos)
  7. beforeUnmount
  8. unmounted

Ejemplo

El siguiente es un ejemplo completo de un componente de Vue que muestra el uso de todas las funciones de hooks del ciclo de vida:

Ejemplo

const LifecycleDemo = {
  template: `<div>{{ message }}</div>`,
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate:La instancia acaba de ser creada');
  },
  created() {
    console.log('created:La instancia se ha creado');
  },
  beforeMount() {
    console.log('beforeMount:Antes de que comience el montaje');
  },
  mounted() {
    console.log('mounted:La instancia se ha montado');
  },
  beforeUpdate() {
    console.log('beforeUpdate:Antes de la actualización de datos');
  },
  updated() {
    console.log('updated:Actualización de datos completada');
  },
  beforeUnmount() {
    console.log('beforeUnmount:Antes de que la instancia se desmonte');
  },
  unmounted() {
    console.log('unmounted:La instancia se ha desmontado');
  }
};

const app = Vue.createApp({
  components: {
    LifecycleDemo
  }
});

app.mount('#app');

Pruébalo »

Este ejemplo imprimirá en la consola los registros de cada función de hook del ciclo de vida, lo que ayuda a comprender el orden y el propósito de cada etapa del ciclo de vida.

Hooks de la Composition API

Vue 3 introduce la Composition API (Composition API), a través desetupla función permite organizar los hooks del ciclo de vida de manera más clara a nivel lógico. Al usar la Composition API, estos hooks se definen medianteonXxxla función:

  • onMounted: equivalente amounted。
  • onBeforeUnmount: equivalente abeforeUnmount。
  • onUnmounted: equivalente aunmounted。
  • onBeforeMount: equivalente abeforeMount。
  • onBeforeUpdate: equivalente abeforeUpdate。
  • onUpdated: equivalente aupdated。
  • onCreatedyonBeforeCreateEn la Composition API normalmente no se utilizan, porquesetupel código en su interior se ejecuta durante la etapa de creación.

Hooks del ciclo de vida que utilizan la Composition API:

Ejemplo

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('¡Componente montado!');
      // Realiza operaciones de inicialización aquí
    });

    onBeforeUnmount(() => {
      console.log('¡El componente está a punto de desmontarse!');
      // Realiza operaciones de limpieza aquí
    });
  }
};

Ventajas de la Composition API:

  • Alta reutilización: se pueden combinar los hooks del ciclo de vida con otra lógica, lo que facilita la encapsulación y la reutilización.
  • Lógica más clara: consetupla otra lógica en su interior se implementa en una sola función, reduciendo la dispersión y la complejidad del código.
Otras extensiones