O processo de um componente desde a criação até a destruição é chamado de ciclo de vida.
Quando usamos a API combinada do Vue3, não há ciclos de vida beforeCreate e criado
O ciclo de vida do componente é o seguinte:
- onBeforeMount() é chamado antes que o componente DOM seja realmente renderizado e montado. Nesta etapa, o elemento raiz ainda não existe.
- onMounted() é chamado após a primeira renderização do componente, o elemento agora está disponível, permitindo acesso direto ao DOM
- onBeforeUpdate() Chamado quando os dados são atualizados, antes que o DOM virtual seja corrigido.
- onUpdated() Depois que o DOM for atualizado, o método atualizado será chamado.
- onBeforeUnmount() Chamado antes que a instância do componente seja desmontada. Nesta fase, a instância ainda está totalmente funcional.
- onUnmounted() Chamado depois que a instância do componente é desmontada. Quando esse gancho é chamado, todas as diretivas da instância do componente são desvinculadas, todos os ouvintes de evento são removidos e todas as instâncias do componente filho são desmontadas.
API de opções vs ganchos de API de composição
| API opcional | API composta |
|---|---|
| antes de criar | Não é necessário* |
| criada | Não é necessário* |
| antes de montar | antes de montar |
| montado | onMounted |
| antes de atualizar | onBeforeUpdate |
| Atualizada | onAtualizado |
| antes de desmontar | onBeforeUnmount |
| desmontado | onUnmounted |
| erro capturado | onErrorCaptured |
| renderTracked | onRenderTracked |
| renderTriggered | onRenderTriggered |
| ativado | onAtivated |
| desativado | onDesativado |
Exemplo de código:
<template>
<h3>我是组件</h3>
<div ref="div">{
{str}}</div>
<button @click="change">修改str</button>
</template>
<script setup lang="ts">
import {
ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
const str=ref<string>('我是大漂亮');
console.log(str);
const div=ref<HTMLDivElement>();
const change=()=>{
str.value='小可爱';
}
onBeforeMount(()=>{
console.log('创建前',div.value);
})
onMounted(()=>{
console.log('挂载完成',div.value);
})
onBeforeUpdate(()=>{
console.log('更新前')
})
onUpdated(()=>{
console.log('更新完成')
})
onBeforeUnmount(()=>{
console.log('卸载之前')
})
onUnmounted(()=>{
console.log('卸载完成')
})
</script>
<style scoped>
</style>
Carregamento da página concluído:
Ref<"I'm Damei">
estava indefinido antes da criação e a montagem
foi concluída
<div>小可爱</div>"
Após clicar no botão:
Impressão do console:
antes da atualização,
atualização completa