Actualizaciones y $nextTick en Vue

Uso de $nextTick: la devolución de llamada retrasada se ejecuta después del siguiente ciclo de actualización del DOM. Úselo inmediatamente después de modificar los datos y luego espere a que se actualice el DOM.

Uso actualizado: debido a cambios en los datos, se llamará al enlace después de que el DOM virtual se vuelva a renderizar y parchear. Cuando se llama a este enlace, el componente DOM se actualiza, por lo que ahora se pueden realizar operaciones dependientes de DOM.

Esto. $ nextTick () se puede usar como una operación después de que se actualiza el DOM después de que se actualizan los datos locales, y la función de ciclo de vida actualizada se puede usar globalmente.

Si no lo has notado, Vue lo hace de forma asincrónica al actualizar el DOM. Cada vez que se detecta un cambio de datos, Vue abre una cola para almacenar en buffer todos los cambios de datos que ocurren en el mismo ciclo de eventos.

(Es decir, el DOM no se actualizará inmediatamente después de que cambien los datos, y los eventos que actualizan el DOM de acuerdo con los datos se colocan en la cola asincrónica).

Si el mismo observador se activa varias veces, solo se incluirá en la cola una vez. Este método de deduplicación de datos durante el almacenamiento en búfer es importante para evitar cálculos y operaciones DOM innecesarios. Luego, en el siguiente "tic" del bucle de eventos, Vue vacía la cola y realiza el trabajo real (desduplicado).

Por ejemplo, cuando configura vm.someData = 'nuevo valor', el componente no se vuelve a representar inmediatamente. Cuando se vacía la cola, el componente se actualizará en el siguiente "tic" del bucle de eventos. En la mayoría de los casos, no es necesario que nos preocupemos por este proceso, pero si desea hacer algo basado en el estado DOM actualizado, puede ser un poco complicado. Si bien Vue.js generalmente anima a los desarrolladores a pensar de forma "basada en datos" y evitar el contacto directo con el DOM, a veces tenemos que hacerlo. Para esperar a que Vue termine de actualizar el DOM después de que los datos hayan cambiado, puede usar Vue.nextTick(callback) inmediatamente después de que los datos hayan cambiado. Esta función de devolución de llamada se llamará después de que se complete la actualización del DOM.

(Al final de la cola que actualiza el DOM, se llamará a nextTick para ejecutar la devolución de llamada interna).

Por ejemplo: