Skip to content

Opções: Ciclo de Vida

Consulte também

Para uso partilhado dos gatilhos do ciclo de vida, consulte o Guia - Gatilhos do Ciclo de Vida.

beforeCreate

Chamada quando a instância for inicializada.

  • Tipo

    ts
    interface ComponentOptions {
      beforeCreate?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Chamada imediatamente quando a instância for inicializada, depois da resolução das propriedades, antes de processar outras opções tais como data() ou computed.

    Nota que o gatilho setup() da API de Composição é chamado antes de quaisquer gatilhos da API de Opções, até mesmo antes de beforeCreate().

created

Chamada depois da instância ter terminado de processar todas as opções relacionadas ao estado.

  • Tipo

    ts
    interface ComponentOptions {
      created?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Quando este gatilho é chamado, os seguintes foram configurados: dados reativos, propriedades computadas, métodos, e observadores. No entanto, a fase de montagem ainda não foi começada, e a propriedade $el ainda não estará disponível.

beforeMount

Chamada bem antes do componente ser montado.

  • Tipo

    ts
    interface ComponentOptions {
      beforeMount?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Quando este gatilho é chamado, o componente terminou de configurar o seu estado reativo, mas ainda nenhum dos nós de DOM foi criado. Está prestes a executar o seu efeito de interpretação de DOM pela primeira vez.

    Este gatilho não é chamado durante a interpretação no lado do servidor.

mounted

Chamado depois do componente ter sido montado.

  • Tipo

    ts
    interface ComponentOptions {
      mounted?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Um componente é considerado montado depois:

    • De todos os seus componentes filhos síncronos terem sido montados (isto não inclui componentes assíncronos ou componentes dentro das árvores do <Suspense>).

    • Da sua própria árvore do DOM ter sido criada e inserida no contentor pai. Nota que isto apenas garante que a árvore do DOM do componente está no documento se o contentor da raiz da aplicação também estiver no documento.

    Este gatilho é normalmente usado para executar os efeitos colaterais que precisam do acesso ao DOM interpretado do componente, ou para limitar o código relacionado ao DOM para o cliente numa aplicação interpretada no servidor.

    Este gatilho não é chamado durante a interpretação no lado do servidor.

beforeUpdate

Chamada bem antes do componente estiver prestes a atualizar a sua árvore do DOM devido à uma mudança de estado reativo.

  • Tipo

    ts
    interface ComponentOptions {
      beforeUpdate?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Este gatilho pode ser usado para acessar o estado do DOM antes da Vue atualizar o DOM. Também é seguro modificar o estado do componente dentro deste gatilho.

    Este gatilho não é chamado durante a interpretação no lado do servidor.

updated

Chamada depois do componente ter atualizado a sua árvore do DOM devido à uma mudança de estado reativo.

  • Tipo

    ts
    interface ComponentOptions {
      updated?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Uma gatilho updated dum componente pai é chamado depois do updated dos seus componentes filhos.

    Este gatilho é chamado depois de qualquer atualização do DOM do componente, que pode ser causada por diferentes mudanças de estado. Se precisarmos acessar o DOM atualizado depois duma mudança de estado específica, devemos usar nextTick().

    Este gatilho não é chamado durante a interpretação no lado do servidor.

    AVISO

    Não altere o estado do componente no gatilho updated - isto provavelmente conduzirá à um laço de atualização infinita!

beforeUnmount

Chamada bem antes duma instância de componente estiver a ser desmontada.

  • Tipo

    ts
    interface ComponentOptions {
      beforeUnmount?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Quando este gatilho é chamado, a instância do componente permanece completamente funcional.

    Este gatilho não é chamado durante a interpretação no lado do servidor.

unmounted

Chamada depois do componente ter sido desmontado.

  • Tipo

    ts
    interface ComponentOptions {
      unmounted?(this: ComponentPublicInstance): void
    }
  • Detalhes

    Um componente é considerado desmontado depois:

    • De todos os seus componentes filhos terem sido desmontados.

    • De todos os seus efeitos reativos associados (efeito de interpretação e computado ou observadores criados durante a setup()) terem sido interrompidos.

    Use este gatilho para limpar os efeitos colaterais criados manualmente tais como temporizadores, ouvintes de eventos de DOM oou conexões de servidor.

    Este gatilho não é chamado durante a interpretação no lado do servidor.

errorCaptured

Chamada quando um erro propagando-se a partir dum componente descendente tiver sido capturado.

  • Tipo

    ts
    interface ComponentOptions {
      errorCaptured?(
        this: ComponentPublicInstance,
        err: unknown,
        instance: ComponentPublicInstance | null,
        info: string
      ): boolean | void
    }
  • Detalhes

    Os erros podem ser capturados a partir das seguintes fontes:

    • Interpretadores de componente
    • Manipuladores de evento
    • Gatilhos do ciclo de vida
    • função setup()
    • Observadores
    • Gatilhos de diretiva personalizada
    • Gatilhos de transição

    O gatilho recebe três argumentos: o erro, a instância do componente que acionou o erro, e uma sequência de caracteres de informação especificando o tipo da fonte do erro.

    DICA

    Em produção, o terceiro argumento (info) será um código encurtado ao invés da sequência de caracteres da informação completa. Nós podemos encontrar o código ao mapeamento da sequência de caracteres na Referência do Código de Erro de Produção.

    Nós podemos modificar o estado do componente na errorCaptured() para exibir um estado de erro ao utilizador. No entanto, é importante que o estado de erro não interprete o conteúdo original que causou o erro; de outro modo o componente será lançado para um laço de interpretação infinita.

    O gatilho pode retornar false para impedir o erro de propagar-se mais. Consulte os detalhes sobre a propagação de erro abaixo.

    Regras de Propagação de Erros

    • Por padrão, todos os erros ainda serão enviados para o nível de aplicação app.config.errorHandler se for definido, para que estes erros possam ser relatados à um serviço de análises num único lugar.

    • Se vários gatilhos de errorCaptured existirem numa cadeia de herança de componentes ou em uma cadeia de pais, todos serão invocados com o mesmo erro, na ordem de baixo para cima. Isto é semelhante ao mecanismo borbulhante de eventos de DOM nativos.

    • Se o próprio gatilho errorCaptured lançar um erro, tanto este erro quanto o erro original capturado serão enviados à app.config.errorHandler.

    • Um gatilho errorCaptured pode retornar false para evitar que o erro continue a propagar-se. Isto significa essencialmente que "este erro já foi manipulado e deve ser ignorado". Ele evitará quaisquer gatilhos errorCaptured adicionais ou app.config.errorHandler de serem invocados por este erro.

renderTracked

Chamada quando uma dependência reativa tiver sido rastreada pelo efeito de interpretação do componente.

Este gatilho é apenas para o modo de desenvolvimento e não é chamado durante a interpretação no lado do servidor.

  • Tipo

    ts
    interface ComponentOptions {
      renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
    }
    
    type DebuggerEvent = {
      effect: ReactiveEffect
      target: object
      type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
      key: any
    }
  • Consulte também Reatividade em Profundidade

renderTriggered

Chamada quando uma dependência reativa acionar o efeito de interpretação do componente a ser executado novamente.

Este gatilho é apenas para o modo de desenvolvimento e não é chamado durante a interpretação no lado do servidor.

  • Tipo

    ts
    interface ComponentOptions {
      renderTriggered?(this: ComponentPublicInstance, e: DebuggerEvent): void
    }
    
    type DebuggerEvent = {
      effect: ReactiveEffect
      target: object
      type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
      key: any
      newValue?: any
      oldValue?: any
      oldTarget?: Map<any, any> | Set<any>
    }
  • Consulte também Reatividade em Profundidade

activated

Chamada depois da instância do componente for inserida no DOM como parte duma árvore armazenada para consulta imediata pelo <KeepAlive>.

Este gatilho não é chamado durante a interpretação no lado do servidor.

deactivated

Chamada depois da instância do componente ser removida do DOM como parte duma árvore armazenada para consulta imediata pelo <KeepAlive>.

Este gatilho não é chamado durante a interpretação no lado do servidor.

serverPrefetch

Função assíncrona a ser resolvida antes da instância do componente estiver à ser interpretada no servidor.

  • Tipo

    ts
    interface ComponentOptions {
      serverPrefetch?(this: ComponentPublicInstance): Promise<any>
    }
  • Detalhes

    Se um gatilho retornar uma promessa, o interpretador do servidor aguardará até a promessa ser resolvida antes de interpretar o componente.

    Este gatilho é chamado apenas durante a interpretação no lado do servidor e pode ser usado para realizar requisição de dados apenas no servidor.

  • Exemplo

    js
    export default {
      data() {
        return {
          data: null
        }
      },
      async serverPrefetch() {
        // componente é interpretado como parte da requisição inicial
        // pré-requisita dados no servidor pois é mais rápido do que no cliente
        this.data = await fetchOnServer(/* ... */)
      },
      async mounted() {
        if (!this.data) {
          // se data for null ao montar, significa que o componente
          // é interpretado dinamicamente no cliente.
          // Realizar uma requisição no lado do cliente.
          this.data = await fetchOnClient(/* ... */)
        }
      }
    }
  • Consulte também Interpretação no Lado do Servidor

Opções: Ciclo de Vida has loaded