Ciclo de vida do componente

Em Vue, o ciclo de vida do componente é o conjunto de etapas que um componente passa desde a sua criação até a sua destruição. Cada etapa do ciclo de vida é representada por um gancho (hook) que permite que o desenvolvedor execute código em momentos específicos do ciclo de vida do componente.

Os principais ganchos do ciclo de vida do componente Vue são os seguintes:

beforeCreate: este gancho é chamado antes que o componente seja inicializado. Nesta fase, o componente ainda não está acessível e não tem estado ou propriedades.

created: este gancho é chamado após o componente ser inicializado e as suas propriedades e estado terem sido definidos. Nesta fase, o componente ainda não foi adicionado ao DOM.

beforeMount: este gancho é chamado antes do componente ser adicionado ao DOM. Nesta fase, o componente já foi renderizado, mas ainda não está visível no DOM.

mounted: este gancho é chamado depois que o componente é adicionado ao DOM. Nesta fase, o componente está disponível no DOM e pode ser acessado por meio do seu seletor.

beforeUpdate: este gancho é chamado antes que o componente seja atualizado, geralmente em resposta a mudanças em suas propriedades ou estado.

updated: este gancho é chamado depois que o componente é atualizado. Nesta fase, o componente já foi renderizado novamente e quaisquer mudanças foram aplicadas no DOM.

beforeDestroy: este gancho é chamado antes do componente ser destruído e removido do DOM.

destroyed: este gancho é chamado depois que o componente foi destruído e removido do DOM.

A seguir, um exemplo de como usar os ganchos do ciclo de vida em um componente Vue:

  <template>
      <div>
        <p>Counter: {{ count }}</p>
        <button @click="increment">Increment</button>
      </div>
    </template>
    
    <script*>
    export default {
      data() {
        return {
          count: 0,
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      beforeDestroy() {
        console.log('beforeDestroy');
      },
      destroyed() {
        console.log('destroyed');
      },
      methods: {
        increment() {
          this.count++;
        },
      },
    };
    </script>

Neste exemplo, estamos definindo um componente "Counter" com um contador simples e implementando todos os ganchos do ciclo de vida. Quando este componente é inicializado e renderizado no DOM, a sequência de ganchos do ciclo de vida será chamada na seguinte ordem: "beforeCreate", "created", "beforeMount", "mounted". Em seguida, cada vez que o botão "Increment" é clicado, os ganchos "beforeUpdate" e "updated" são chamados. Quando o componente é destruído, os ganchos "beforeDestroy" e "destroyed" são chamados. O console exibirá a ordem de cada gancho do ciclo de vida à medida que é chamado.