O Vue.nextTick é uma API global fornecida pelo Vue.js que serve para adiar a execução de uma função de callback até após o próximo ciclo de atualização do DOM.

Quando você altera dados dentro de uma instância Vue, o framework não atualiza o DOM imediatamente. Em vez disso, ele filtra todas as mudanças ocorridas no mesmo loop de eventos e as armazena em uma fila. O nextTick garante que sua lógica seja executada somente após essa atualização ser concluída.

O Problema Central: Atualizações Assíncronas

A renderização do DOM no Vue é assíncrona para otimizar o desempenho. Considere o seguinte exemplo:

export default {
  data() {
    return {
      title: 'Valor Inicial'
    }
  },
  methods: {
    refreshTitle() {
      this.title = 'Novo Valor';
      console.log(this.$el.textContent); // Exibe "Valor Inicial"
    }
  }
}

Ao chamar refreshTitle, a leitura do DOM ocorre antes da renderização, pois a atualização está na fila de tarefas.

Utilizando o nextTick

A solução é adiar a leitura ou manipulação do DOM até que a atualização seja aplicada:

methods: {
  async refreshTitle() {
    this.title = 'Novo Valor';
    await this.$nextTick();
    console.log(this.$el.textContent); // Agora exibe "Novo Valor"
  }
}

Interno do Funcionamento

O Vue utiliza Promise.then, MutationObserver ou setImmediate para agendar callbacks como microtarefas. Caso nenhuma dessas APIs esteja disponível, recorre a setTimeout(fn, 0).

Fluxo simplificado:

1. Dado é alterado (execução síncrona).
2. Vue agenda a atualização do DOM como uma microtarefa.
3. O callback do nextTick é agendado como outra microtarefa.
4. Após a pilha de execução sincrona esvaziar, as microtarefas são executadas em ordem: primeiro o DOM é atualizado, depois o callback.

Casos de Uso Comuns

1. Acessar Elementos Renderizados

Para focar um input após ele ser exibido:

<template>
  <div>
    <input v-if="showField" ref="field" />
    <button @click="activateField">Mostrar Campo</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showField: false
    }
  },
  methods: {
    activateField() {
      this.showField = true;
      this.$nextTick(() => {
        this.$refs.field.focus();
      });
    }
  }
}
</script>

2. Interagir com Componentes Filhos

Ao renderizar um componente filho dinamicamenet, seu método só estará disponível após a atualização do DOM.

this.childVisible = true;
this.$nextTick(() => {
  this.$refs.childComponent.initialize();
});

3. Integração com Bibliotecas de Tecreiros

Para bibliotecas que dependem do DOM real (como plugins jQuery), é necessário garatnir que elas sejam inicializadas após o Vue ter atualizado a estrutura.

Resumo das Características

Dominar o nextTick é essencial para manipular o estado do DOM de forma confiável no Vue.