Ciclo de Vida de um Componente - 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.