vue.js - template - vue use

¿Qué es nextTick o qué hace en VueJs?

Question

Leí los documentos, pero no lo entiendo. Sé qué datos, computados, nextTick() , métodos hacen pero ¿para qué se nextTick() en vuejs?

Answer 1

Next Tick básicamente le permite actualizar el dom explícitamente después de haber realizado algunos cambios en los datos.

// modify data
vm.msg = ''Hello''
// DOM not updated yet
Vue.nextTick(function () {
  // DOM updated
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
    // DOM updated
})

Supongamos que ha actualizado algún elemento de datos, pero desea ejecutar algo de código una vez que vue haya terminado de representar ese cambio, en ese caso puede usar la función .nextTick .

vm.msg = ''hello''
Vue.nextTick(() => {
 // do something after the render has completed re-rendering.
})

De la Documentación Vue.js:

Aplazar la devolución de llamada que se ejecutará después del siguiente ciclo de actualización de DOM. Úselo inmediatamente después de que haya cambiado algunos datos para esperar la actualización del DOM.

Lea más sobre esto, nextTick .

Answer 2

Para hacer la respuesta de Pranshat sobre la diferencia entre usar nextTick y setTimeout, más explícita, he encontrado su violín: here

mounted() {    
  this.one = "One";

  setTimeout(() => {
    this.two = "Two"
  }, 0);

  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}

Puede ver en el violín que al usar setTimeOut, los datos iniciales parpadean brevemente una vez que el componente se monta antes de adaptar el cambio. Mientras que, al usar nextTick, los datos se secuestran, se modifican, antes de procesarlos en el navegador. Por lo tanto, el navegador muestra los datos actualizados sin siquiera saber lo antiguo. Espero que borre los dos conceptos de una sola vez.

Answer 3

nextTick permite hacer algo después de que haya cambiado los datos y VueJS haya actualizado el DOM según su cambio de datos, pero antes de que el navegador haya procesado los cambios en la página.

Normalmente, los desarrolladores utilizan la función nativa de JavaScript setTimeout para lograr un comportamiento similar. Sin embargo, el uso de setTimeout cede el control al navegador antes de que le devuelva el control a través de su devolución de llamada.

Digamos que has cambiado algunos datos. Vue actualiza DOM basado en los datos. Tenga en cuenta que los cambios de DOM aún no se representan en la pantalla mediante el navegador. Si usó nextTick , su devolución de llamada se llama ahora. Luego, el navegador actualiza la página. Si usas setTimeout , tu devolución de llamada se llamará ahora.

Puedes visualizar este comportamiento creando un pequeño componente como el siguiente:

<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>

Ejecute su servidor local. Verá el mensaje Three se muestra.

Ahora, reemplaza tu this.$nextTick con setTimeout

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

Vuelve a cargar el navegador. Verás Two , antes de ver Three .

Revisa este violín para verlo en vivo.

Eso es porque, Vue actualizó el DOM a Two , le dio el control al navegador. El navegador muestra Two . Entonces, llamó a su devolución de llamada. Vue actualizó el DOM a Three . Que el navegador muestra de nuevo.

Con nextTick . Vue udpated el DOM a Two . Llamado su devolución de llamada. Vue actualizó el DOM a Three . Luego le dio el control al navegador. Y, el navegador muestra Three .

Espero que haya quedado claro.

Para entender cómo Vue implementa esto, debe comprender el concepto de Event Loop y microtasks .

Una vez que tenga esos conceptos claros, consulte el código fuente para nextTick .