Entendendo os Life Cycle Hooks do Vue.js

Ao desenvolver aplicativos Vue.js, é essencial entender como os componentes funcionam e como eles se comportam em diferentes pontos do seu ciclo de vida. Cada componente do Vue.js passa por uma série de fases, desde a criação até a destruição, e o desenvolvedor pode utilizar os Life Cycle Hooks para executar ações específicas durante cada uma dessas fases.

Neste artigo, vamos dar uma olhada em cada um dos Life Cycle Hooks do Vue.js e explicar como eles funcionam.

Os Hooks de Criação

beforeCreate

O beforeCreate é executado sempre que um componente é inicializado. Nesta fase, nenhum dado ou método está disponível ainda.

<script>
export default {
  beforeCreate() {
    console.log('Lifecycle Initialized')
  }
}
</script>

created
Durante o hook created, podemos acessar todos os membros de dados reativos e métodos como parte do nosso componente. O DOM ainda não foi montado.

<script>
export default {
  data() {
    return {
      data: ""  
    }
  },
  created() {
    this.data = "Created lifecycle called";
  }
}
</script>

Os Hooks de Montagem

beforeMount
O hook beforeMount é executado antes da renderização inicial do componente e após a compilação das funções de modelo ou renderização.

<script>
export default {
  beforeMount() {
    console.log(`vm.$el has not been created yet`)
  }
}
</script>

mounted
No hook mounted, temos acesso aos componentes reativos e ao DOM renderizado (via this.$el).

<script>
export default {
  mounted() {
    console.log(`At this point, vm.$el has been created and el has been replaced.`);
  }
}
</script>

Os Hooks de Atualização

beforeUpdate
O hook beforeUpdate é executado após as alterações de dados no seu componente, imediatamente antes do DOM ser atualizado e renderizado novamente.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(this.counter)
  }
}
</script>

updated
O hook updated é executado após as alterações de dados no seu componente e o DOM ser atualizado e renderizado novamente.

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  updated() {
    console.log(`At this point, Virtual DOM has  re-rendered and patched.`)
    console.log(this.counter);
  }
}
</script>

Os Hooks de Destruição

beforeDestroy
O hook beforeDestroy é invocado imediatamente antes do componente ser destruído. O componente ainda existe e está totalmente funcional.

<script>
export default {
  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
  }
}
</script>

destroyed
O hook destroyed é invocado quando tudo que pertence ao componente foi destruído e removido da existência. Esse método é útil para executar ações finais de limpeza dentro do componente.

export default {
  destroyed() {
    console.log('At this point, watchers, child components, and event listeners have been torn down.')
  }
}

Com esses life cycle hooks, é possível executar ações específicas em momentos cruciais do ciclo de vida de um componente do Vue.js. Entendê-los e utilizá-los adequadamente pode melhorar significativamente a qualidade do código e a experiência do usuário.