Gatilhos do Ciclo de Vida
Cada instância de componente de Vue percorre através de uma série de etapas de inicialização quando é criada - por exemplo, ela precisa configurar a observação de dados, compilar o modelo de marcação, montar a instância no DOM, e atualizar o DOM quando os dados mudam. Ao longo do caminho, ela também executa funções chamadas de gatilhos do ciclo de vida, dando aos utilizadores a oportunidade de adicionar seus próprios código em estágios específicos.
Registando Gatilhos do Ciclo de Vida
Por exemplo, o gatilho onMounted
pode ser utilizado para executar o código depois de terminado a interpretação inicial e criado os nós do DOM:
vue
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
Também existem outros gatilhos que serão chamados em diferentes estágios do ciclo de vida da instância, com os mais comummente utilizados sendo onMounted
, onUpdated
, e onUnmounted
. .
Quando estiveres chamando onMounted
, a Vue associa automaticamente a função de resposta registada com a atual instância do componente ativo. Isto exige que estes gatilhos sejam registados de forma síncrona durante a definição de componente. Por exemplo, não faça isto:
js
setTimeout(() => {
onMounted(() => {
// isto não funcionará.
})
}, 100)
Repare que isto não significa que a chamada deve ser colocada de maneira léxica dentro de setup()
ou <script setup>
. A onMounted()
pode ser chamada em uma função externa enquanto a pilha de chamada for síncrona e surgir de dentro de setup()
.
Diagrama do Ciclo de Vida
Abaixo está um diagrama para o ciclo de vida da instância. Tu não precisas exatamente entender tudo agora, mas a medida que aprenderes e construires mais, será uma referência útil.
Consulte a referência de API de Gatilhos do Ciclo de Vida para obter detalhes sobre todos gatilhos do ciclo de vida e seus respetivos casos de uso.