As funções hook do Vue são funções específicas executadas durante o ciclo de vida e nos permitem executar lógica personalizada em diferentes estágios do componente. A seguir estão funções de gancho comuns do Vue e exemplos de suas aplicações:
1.beforeCreate: Chamado após a inicialização da instância, mas antes da observação dos dados e da configuração do evento. Ele pode ser usado para realizar algum trabalho de inicialização.
Por exemplo: Neste gancho, podemos inicializar algumas variáveis globais ou chamar uma API de terceiros para obter dados para que fiquem disponíveis após a inicialização da instância do componente.
2.created: Chamado imediatamente após a criação da instância. A função hook pode acessar os dados e métodos do componente atual neste estágio.
Por exemplo: Neste gancho, podemos solicitar à API backend para obter dados e inicializar os dados do componente, ou enviar notificações de eventos para outros componentes.
3.beforeMount: Chamado antes da montagem. Nesta função de gancho, você pode acessar o elemento DOM do componente atual.
Exemplo: Neste gancho, podemos modificar a estrutura DOM do componente atual ou criar alguns componentes dinâmicos.
4.mounted: Chamado após a montagem. Nesta função de gancho, você pode acessar os elementos DOM do componente atual e os dados do componente.
Por exemplo: Neste gancho, podemos inicializar alguns plug-ins, vincular eventos ou enviar dados estatísticos ao servidor.
5.beforeUpdate: Chamado antes da atualização dos dados. Nesta função de gancho, você pode acessar dados anteriores e dados atuais.
Por exemplo: Neste gancho, podemos comparar os dados anteriores com os dados atuais para tomar uma decisão se precisamos realizar algumas operações lógicas adicionais.
6.updated: Chamado após a atualização dos dados. Nesta função de gancho, você pode acessar os dados mais recentes do elemento DOM e do componente.
Por exemplo: Neste gancho, podemos atualizar alguns plug-ins ou sincronizar os dados do componente atual com outros componentes.
7.beforeDestroy: Chamado antes da instância ser destruída. Nesta função de gancho, algum trabalho de limpeza pode ser feito.
Por exemplo: Neste gancho, podemos interromper alguns plug-ins, liberar alguns recursos ou cancelar a assinatura de alguns eventos.
8.destroyed: Chamado após a destruição da instância. Nesta função de gancho, o componente foi completamente descarregado e os dados e métodos do componente não estão acessíveis.
Por exemplo: Neste gancho, podemos realizar algum trabalho pós-destruição, como limpar algumas variáveis globais ou cancelar a inscrição de eventos de outros componentes.
Em geral, a função hook do Vue fornece um rico conjunto de eventos do ciclo de vida e executa lógica personalizada em diferentes estágios, permitindo-nos compreender e controlar melhor o ciclo de vida do componente.
Vamos usar o código para implementar a função hook do ciclo de vida do Vue:
<template>
<div>
<p v-if="showMessage">{
{ message }}</p>
<button @click="toggleMessage">Toggle message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue!",
showMessage: true,
};
},
beforeCreate() {
console.log("beforeCreate: 在实例初始化之后，数据观测和事件配置之前被调用。");
},
created() {
console.log("created: 在实例创建完成后被立即调用。");
console.log(`当前组件的数据: ${JSON.stringify(this.$data)}`);
},
beforeMount() {
console.log("beforeMount: 在挂载之前被调用。");
console.log(`当前组件的 DOM 元素: ${this.$el}`);
},
mounted() {
console.log("mounted: 在挂载之后被调用。");
console.log(`当前组件的 DOM 元素: ${this.$el}`);
},
beforeUpdate() {
console.log("beforeUpdate: 在数据更新之前被调用。");
console.log(`之前的数据: ${JSON.stringify(this.$data)}`);
},
updated() {
console.log("updated: 在数据更新之后被调用。");
console.log(`最新的数据: ${JSON.stringify(this.$data)}`);
},
beforeDestroy() {
console.log("beforeDestroy: 在实例销毁之前被调用。");
},
destroyed() {
console.log("destroyed: 在实例销毁后被调用。");
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
},
},
};
</script>
No código acima, adicionamos alguns ganchos de ciclo de vida necessários ao componente e usamos console.log para gerar as informações correspondentes. Também adicionamos um evento de botão para mostrar ou ocultar algumas informações alternando as propriedades dos dados. Este exemplo pode nos ajudar a entender melhor o papel de cada estágio no ciclo de vida do Vue.