O que é nextTick ou o que ele faz em VueJs

Eu li a documentação, mas não consigo entender. Eu sei o que os métodos de dados, calculados e observados fazem, mas para que serve nextTick()em vuejs?

nextTick permite que você faça algo depois de alterar os dados e o VueJS atualizar o DOM com base na alteração dos dados, mas antes que o navegador renderize as alterações na página.

Normalmente, os desenvolvedores usam a função JavaScript nativa setTimeout para atingir um comportamento semelhante. Mas, o uso setTimeoutcede o controle ao navegador antes de devolver o controle a você por meio do retorno de chamada.

Digamos que você alterou alguns dados. O Vue atualiza o DOM com base nos dados. Lembre-se de que as alterações do DOM ainda não foram renderizadas na tela pelo navegador. Se você usou nextTick, seu retorno de chamada será chamado agora. Em seguida, o navegador atualiza a página. Se você usou setTimeout, seu retorno de chamada seria chamado apenas agora.

Você pode visualizar esse comportamento criando um pequeno componente como o seguinte:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

Execute seu servidor local. Você verá a mensagem Threesendo exibida.

Agora, substitua seu this.$nextTickporsetTimeout

setTimeout(() => {
    this.msg = 'Three';
}, 0);

Recarregue o navegador. Você vai ver Two, antes de ver Three.

Verifique este violino para vê-lo ao vivo

Isso porque, Vue atualizou o DOM para Two, deu o controle ao navegador. Navegador exibido Two. Em seguida, ligou para seu retorno de chamada. Vue atualizou o DOM para Three. Que o navegador exibiu novamente.

Com nextTick. Vue atualizou o DOM para Two. Ligou para seu retorno de chamada. Vue atualizou o DOM para Three. Em seguida, passou o controle para o navegador. E, o navegador exibido Three.

Espero que tenha ficado claro.

Para entender como o Vue implementa isso, você precisa entender o conceito de loop de eventos e microtarefas .

Depois de ter esses conceitos claros (er), verifique o código-fonte para nextTick .

O conteúdo foi retirado de Por Adrià Fontcuberta

A documentação da Vue diz:

Vue.nextTick ([callback, contexto])

Adie o retorno de chamada a ser executado após o próximo ciclo de atualização do DOM. Use-o imediatamente após alterar alguns dados para aguardar a atualização do DOM.

Hmm ..., se parecer intimidante no começo, não se preocupe, vou tentar explicar da forma mais simples possível. Mas primeiro existem 2 coisas que você deve saber:

1. Seu uso é incomum. Como uma daquelas cartas mágicas de prata. Eu escrevi vários Vueaplicativos e encontrei nextTick () uma ou duas vezes.

2. É mais fácil entender depois de ver alguns casos de uso reais. Depois de ter a ideia, o medo irá embora e você terá uma ferramenta útil na mão.

Vamos em frente, então.

Compreendendo $ nextTick

Somos programadores, não somos? Usaremos nossa amada abordagem de dividir e conquistar para tentar traduzir a descrição .nextTick()pouco a pouco. Começa com:

Adie o retorno de chamada

Ok, agora sabemos que ele aceita um retorno de chamada. Então fica assim:

Vue.nextTick(function () {
  // do something cool
});

Ótimo. Este retorno de chamada é adiado (é assim que a geração do milênio diz atrasada) até ...

o próximo ciclo de atualização do DOM.

OK. Sabemos que o Vue realiza atualizações DOM de forma assíncrona . Apresenta uma forma de manter essas atualizações “armazenadas” até que seja necessário aplicá-las. Ele cria uma fila de atualizações e a libera quando necessário. Em seguida, o DOM é “corrigido” e atualizado para sua versão mais recente.

O que?

Deixe-me tentar novamente: imagine que seu componente faz algo realmente essencial e inteligente, como o this.potatoAmount = 3.Vue não renderiza novamente o componente (e, portanto, o DOM) automaticamente. Ele irá enfileirar a modificação necessária. Então, no próximo “tique” (como em um relógio), a fila é esvaziada e a atualização é aplicada. Tada!

OK! Portanto, sabemos que podemos usar nextTick()para passar uma função de retorno de chamada que é executada logo após os dados serem definidos e o DOM atualizado.

Como eu disse antes ... não com tanta frequência. A abordagem de “fluxo de dados” que impulsiona Vue, React e o outro do Google, que não vou mencionar, torna-a desnecessária na maioria das vezes. No entanto, às vezes precisamos esperar que alguns elementos apareçam / desapareçam / sejam modificados no DOM. É aí que nextTick se torna útil.

Use-o imediatamente após alterar alguns dados para aguardar a atualização do DOM.

Exatamente! Esta é a última definição que a Vue docs nos forneceu. Dentro de nosso retorno de chamada, o DOM foi atualizado para que possamos interagir com a versão “mais atualizada” dele.

Provar

Está bem, está bem. Consulte o console e você verá que o valor de nossos dados é atualizado apenas dentro do retorno de chamada de nextTick:

const example = Vue.component('example', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  mounted () {
    this.message = 'updated'

        console.log(
        'outside nextTick callback:', this.$el.textContent
    ) // => 'not updated'

    this.$nextTick(() => {
      console.log(
        'inside nextTick callback:', this.$el.textContent
      ) // => 'not updated'
    })
  }
})


new Vue({
  el: '#app',
    render: h => h(example)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app"></div>

Um caso de uso

Vamos tentar definir algum caso de uso útil para nextTick.

Imagine que você precisa realizar alguma ação quando um componente é montado. MAS! não apenas o componente. Você também precisa esperar até que todos os seus filhos estejam montados e disponíveis no DOM. Droga! Nosso gancho montado não garante que toda a árvore de componentes seja renderizada.

Se ao menos tivéssemos uma ferramenta para esperar pelo próximo ciclo de atualização do DOM ...

Hahaa:

mounted() {
  this.$nextTick(() => {
    // The whole view is rendered, so I can safely access or query
    // the DOM. ¯\_(ツ)_/¯
  })
}

Em poucas palavras

Portanto: nextTické uma maneira confortável de executar uma função depois que os dados foram configurados e o DOM foi atualizado.

Você precisa esperar pelo DOM, talvez porque você precise realizar alguma transformação ou precisa esperar que uma biblioteca externa carregue seu material? Em seguida, use nextTick.

Algumas pessoas também usam nextTick em seus testes de unidade como uma forma de garantir que os dados foram atualizados. Desta forma, eles podem testar a “versão atualizada” do componente.

Vue.nextTick () ou vm. $ NextTick ()?

Não se preocupe. Ambos são (quase) iguais. Vue.nextTick()refere-se ao método API global, enquanto vm.$nextTick()é um método de instância. A única diferença é que vm.$nextTicknão aceita um contexto como segundo parâmetro. Ele está sempre vinculado a this(também conhecido como a própria instância).

Um último pedaço de frescor

Observe que nextTickretorna um Promise, para que possamos ficar totalmente tranquilos async/awaite melhorar o exemplo:

async mounted () {
    this.message = 'updated'
    console.log(this.$el.textContent) // 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // 'updated'
}

Next Tick basicamente permite que você execute algum código, após o vue ter renderizado novamente o componente quando você tiver feito algumas alterações em uma propriedade reativa (dados).

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // this function is called when vue has re-rendered the component.
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
      // this function is called when vue has re-rendered the component.
})

Da documentação do Vue.js:

Adie o retorno de chamada a ser executado após o próximo ciclo de atualização do DOM. Use-o imediatamente após alterar alguns dados para aguardar a atualização do DOM.

Leia mais sobre isso aqui .

Para tornar a resposta de Pranshat sobre a diferença entre usar nextTick e setTimeout, mais explícita, bifurquei seu violino: aqui

mounted() {    
  this.one = "One";
 
  setTimeout(() => {
    this.two = "Two"
  }, 0);
  
  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

Você pode ver no violino que, ao usar setTimeOut, os dados iniciais piscam rapidamente assim que o componente é montado antes de adaptar a mudança. Considerando que, ao usar nextTick, os dados são sequestrados, alterados, antes de serem processados ​​para o navegador. Assim, o navegador mostra os dados atualizados sem qualquer conhecimento dos antigos. Espero que isso esclareça os dois conceitos de uma só vez.