Ciclo de Vida de um Componente no Vue.js

O ciclo de vida de um componente Vue.js é composto por uma série de etapas que descrevem seu funcionamento desde a criação até que ele seja desmontado. O framework Vue disponibiliza métodos específicos para executar ações em momentos determinados durante essas etapas do ciclo de vida.

O ciclo completo pode ser descrito assim:

A função Vue.createApp() é chamada junto com o método mount(), o que inicia a configuração da aplicação Vue.
Após a inicialização, mas antes da configuração de propriedades, métodos e handlers de eventos, o método beforeCreate() é chamado.
Em seguida, o objeto Vue é criado, e suas propriedades, métodos e handlers de eventos são configurados.
Após a criação e configuração do objeto Vue, o método created() é chamado. Nesse momento, o objeto Vue ainda não está associado a nenhum elemento HTML da página.
O próximo passo é a compilação do template: o código HTML que define a estrutura do componente.
O método beforeMount() é executado.
O elemento HTML especificado no método mount() é substituído pelo template compilado.
Após essa substituição, o método mounted() é chamado. Isso marca o momento em que o template está associado ao DOM, permitindo interações com ele.

Durante a execução da aplicação, quando há alterações nos dados, outros estágios do ciclo de vida ocorrem:

Os dados são modificados.
O método beforeUpdate() é chamado antes de qualquer alteração nos dados.
O DOM é re-renderizado para refletir as alterações no virtual DOM.
O método updated() é chamado após a atualização dos dados. Nesse momento, o DOM já foi re-renderizado para refletir as alterações.

Quando um componente precisa ser removido da aplicação, o ciclo de vida segue estas etapas:

O método beforeUnmount() é chamado logo antes de o componente ser desmontado.
Após desmontar o componente, o método unmounted() é executado.

O diagrama a seguir ilustra o ciclo de vida de um componente Vue.js:

Diagrama do ciclo de vida de um componente Vue.js Fonte: Vue.js Diagrama do Ciclo de Vida.

O código a seguir exemplifica a utilização dos métodos do ciclo de vida de um componente Vue.js:

<!DOCTYPE html>
<html>
  <head>
    <title>Explorando o Ciclo de Vida do Vue.js</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <h3>Ciclo de Vida do Vue.js</h3>
    <div id="app">
      <h2>{{message}}</h2>
      <button @click="message='Updated'">Update</button>
    </div>
    <script>
      const vueApp = Vue.createApp({
        data() {
          return { message: "Welcome to Vue.js" };
        },
        beforeCreate() {
          console.log("beforeCreate()");
        },
        created() {
          console.log("created()");
        },
        beforeMount() {
          console.log("beforeMount()");
        },
        mounted() {
          console.log("mounted()");
        },
        beforeUpdate() {
          console.log("beforeUpdate()");
        },
        updated() {
          console.log("updated()");
        },
        beforeUnmount() {
          console.log("beforeUnmount()");
        },
        unmounted() {
          console.log("unmounted()");
        },
      });
      vueApp.mount("#app");
      setTimeout(() => vueApp.unmount("#app"), 10000);
    </script>
  </body>
</html>

Neste exemplo, o método setTimeout() do JavaScript chama o método unmount() do objeto vueApp após 10 segundos.

No console do navegador, é possível observar a sequência de eventos do ciclo de vida sendo registrados. Quando o botão "Update" é pressionado, o DOM é atualizado, acionando os métodos beforeUpdate() e updated(). Após 10 segundos, o método vueApp.unmount() é executado, disparando os métodos beforeUnmount() e unmounted(). Nesse momento, o objeto Vue é desmontado e deixa de estar acessível.

Eventos de ciclo de vida de um componente após a criação.

Eventos de ciclo de vida de um componente após atualização.

Eventos de ciclo de vida de um componente após ser desmontado.

Documentação oficial: