• 因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。
    • Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。

    实现原理

    • 先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数；
    • 否则如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数。
    • 如果都不支持，则利用setTimeout设置延时为0。
    • 每次event loop的最后，会有一个UI render，也就是更新DOM
    • 只要让nextTick里的代码放在UI render步骤后面执行，就能访问到更新后的DOM了。

    https://blog.csdn.net/qq_38290251/article/details/107550899

    1. var nextTick = (function () {
    2.         var callbacks = []; // 存储需要触发的回调函数
    3.         var pending = false; // 是否正在等待的标识(false:允许触发在下次事件循环触发callbacks中的回调, true: 已经触发过,需要等到下次事件循环)
    4.         var timerFunc; // 设置在下次事件循环触发callbacks的 触发函数
    6.         //处理callbacks的函数
    7.         function nextTickHandler () {
    8.             pending = false;// 可以触发timeFunc
    9.             var copies = callbacks.slice(0);//复制callback
    10.             callbacks.length = 0;//清空callback
    11.             for (var i = 0; i < copies.length; i++) {
    12.                 copies[i]();//触发callback回调函数
    13.             }
    14.         }
    16.         //如果支持Promise,使用Promise实现
    17.         if (typeof Promise !== 'undefined' && isNative(Promise)) {
    18.             var p = Promise.resolve();
    19.             var logError = function (err) { console.error(err); };
    20.             timerFunc = function () {
    21.                 p.then(nextTickHandler).catch(logError);
    22.                 // ios的webview下,需要强制刷新队列,执行上面的回调函数
    23.                 if (isIOS) { setTimeout(noop); }
    24.             };
    26.             //如果Promise不支持,但是支持MutationObserver(h5新特性,异步,当dom变动是触发,注意是所有的dom都改变结束后触发)
    27.         } else if (typeof MutationObserver !== 'undefined' && (
    28.                 isNative(MutationObserver) ||
    29.                 // PhantomJS and iOS 7.x
    30.                 MutationObserver.toString() === '[object MutationObserverConstructor]'
    31.             )) {
    32.             // use MutationObserver where native Promise is not available,
    33.             // e.g. PhantomJS IE11, iOS7, Android 4.4
    34.             var counter = 1;
    35.             var observer = new MutationObserver(nextTickHandler);
    36.             //创建一个textnode dom节点,并让MutationObserver 监视这个节点;而 timeFunc正是改变这个dom节点的触发函数
    37.             var textNode = document.createTextNode(String(counter));
    38.             observer.observe(textNode, {
    39.                 characterData: true
    40.             });
    41.             timerFunc = function () {
    42.                 counter = (counter + 1) % 2;
    43.                 textNode.data = String(counter);
    44.             };
    45.         } else {// 上面两种不支持的话,就使用setTimeout
    47.             timerFunc = function () {
    48.                 setTimeout(nextTickHandler, 0);
    49.             };
    50.         }
    51.         //nextTick接受的函数, 参数1:回调函数  参数2:回调函数的执行上下文
    52.         return function queueNextTick (cb, ctx) {
    53.             var _resolve;//用于接受触发 promise.then中回调的函数
    54.             //向回调数据中pushcallback
    55.             callbacks.push(function () {
    56.                 //如果有回调函数,执行回调函数
    57.                 if (cb) { cb.call(ctx); }
    58.                 if (_resolve) { _resolve(ctx); }//触发promise的then回调
    59.             });
    60.             if (!pending) {//是否执行刷新callback队列
    61.                 pending = true;
    62.                 timerFunc();
    63.             }
    64.             //如果没有传递回调函数,并且当前浏览器支持promise,使用promise实现
    65.             if (!cb && typeof Promise !== 'undefined') {
    66.                 return new Promise(function (resolve) {
    67.                     _resolve = resolve;
    68.                 })
    69.             }
    70.         }
    71.     })();
    73.     mounted: function () {
    74.   this.message = "abc"
    75.   this.$nextTick(function () {
    76.     console.log(this.message)
    77.   })
    78. }