nextTick

1. nextTick是等待下一次DOM更新刷新的工具方法。
2. vue有一个异步更新策略，vue在更新DOM时是异步执行的。当数据发生变化，Vue不会立刻更新DOM,将开启一个异步更新队列，视图需要等队列中所有数据变化（异步更新）完成之后，再统一进行更新。
3. 如果没有nextTick更新机制，那么num每次更新值都会触发更新，有了nextTick机制，只需要更新一次，所有nextTick也是一种优化策略。
4. 开发时使用场景：

• created中想要获取DOM时
• 响应式数据变化时获取DOM更新后的状态

5. nextTick源码

function nextTick(fn) {
    const p = currentFlushPromise || resolvedPromise;
    return fn ? p.then(this ? fn.bind(this) : fn) : p;
}

nextTick执行过程：

1. set修改data中的数据；
2. 执行watcher的update;
3. pushWatcher(this)
4. 把watcher推入一个queue
5. nextTick(flushQueue)
6. flushQueue遍历watcher执行run,更新页面（异步更新）

Vue2中nextTick的相关代码

let callbacks = [];

function flushCallbacks() {
    callbacks.forEach(cb => cb());
}

export function nextTick(cb) {
    callbacks.push(cb)


    // 要异步刷新这个callbacks,获取一个异步的方法
    // 异步是分执行顺序的，会先执行（promise mutationObserver） setImmediate setTimeout

    let timerFunc = () => {
        flushCallbacks();
    }


    if (Promise) {
        return Promise.resolve().then(timerFunc)
    }

    if (MutationObserver) {
        let observe = new MutationObserver(timerFunc);
        let textNode = document.createTextNode(1);
        observe.observe(textNode, {
            characterData: true
        })
        textNode.textContent(2)
        return
    }


    if (setImmediate) {
        return setImmediate(timerFunc)
    }

    return setTimeout(timerFunc, 0);
}