Vue.js

Appearance

On this page

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 onMountedmounted 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>
js
export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

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.mounted, updated, e unmounted..

Todos os gatilhos do ciclo de vida são chamados com o seus contextos de this apontando para atual instância ativa que estiver invocando-a. Nota que isto significa que deves evitar a utilização de funções em flecha quando estiveres declarando gatilhos do ciclo de vida, visto que não serás capaz de acessar a instância do componente através de this se o fizeres.

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.

Diagrama do Ciclo de Vida do Componente

Consulte a referência de API de Gatilhos do Ciclo de Vidareferê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.

Editar esta página na GitHub