Vue.$nextTick([callback,context]) : Executes deferred callback.

Defer the execution of the code in the callback until the next DOM update loop is complete, at which point the updated DOM and the latest page data can be retrieved.

Version support

Official website example:

Version support:

2.1.0+ : Supports Promise writing.

Vm.msg = 'Hello' // DOM is not updated vue.nexttick (()=>{// DOM is updated}); NextTick ().then(function () {// DOM updated})Copy the code

Why is $nextTick used? What does the DOM update loop mean?

  1. Answer: Since the VUE performs this DOM update asynchronously, it is possible that asynchronously, the data currently retrieved is not the latest data on the page. The purpose of using $nextTick is to ensure that the latest data is retrieved as synchronized.
  2. The DOM update loop, where the VUE sees changes in the data and opens a queue to process those changes,

What environments might use $nextTick?

Simplicity: DOM changes as data changes.

For example, in the Created life cycle in Vue, where the DOM is not yet suspended, you might need to use $nextTick. (Generally do not do so, are executed in mounted).

$nextTick: $nextTick: $nextTick

export function nextTick (cb? : Function, ctx? Callbacks. Push (() => {cb.call(CTX)}) if (! Pending) {pending = true // timerFunc()}} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- timeFunc () {let timerFunc / / determine whether native support Promise the if (typeof Promise ! Const p = promise.resolve () timerFunc = () => {// If the native support Promise FlushCallbacks p.hen (flushCallbacks) if (isIOS) setTimeout(noop)} isUsingMicroTask = true // } else if (! isIE && typeof MutationObserver ! == 'undefined' && ( isNative(MutationObserver) || // PhantomJS and iOS 7.x MutationObserver.toString() === '[object MutationObserverConstructor] ')) {let counter = 1 / / if primary support MutationObserver MutationObserver execution flushCallbacks const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true // SetImmediate} Else if (typeof setImmediate! {timerFunc = () => {// setImmediate performs flushCallbacks with setImmediate if native supports setImmediate SetImmediate (flushCallbacks) {setTimeout 0} else {timerFunc = () => {// Use setTimeout to perform flushCallbacks setTimeout(flushCallbacks, Function flushCallbacks () {pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } }Copy the code