vue nextTick源码
早之前有分享过vue的nextTick的使用，当时说当数据发生变化，更新后执行回调没有实现，那时候也不知道怎么测试的，其实nextTick方法只是做了一步异步。
先明确一下，修改数据、渲染页面，在vue里面都是同步的，包括生命周期，也是同步执行，而nextTick是用异步的回调，所以才能获取最新的dom或者实例属性。
之前2.2版本只有promise、MutationObserver、setTimeout，而且是一个自执行函数，我觉得那样看的更舒服，2.x最后的版本2.6.9就不太一样了。上源码，然后使用一下。
先确定用哪种异步任务，promise>motatiosObserver>setImmediate>setTimout，这几个的使用方法可以自己查一下：
function isNative (Ctor) {
return /native code/.test(Ctor.toString())
}
var timerFunc;
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
timerFunc = function () {
p.then(flushCallbacks);
};
isUsingMicroTask = true;
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
var counter = 1;
var observer = new MutationObserver(flushCallbacks);
var textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true
});
timerFunc = function () {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
isUsingMicroTask = true;
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
timerFunc = function () {
setImmediate(flushCallbacks);
};
} else {
timerFunc = function () {
setTimeout(flushCallbacks, 0);
};
}因为我们可能多次调用nextTick，多次调用也只会一起循环执行，不会调用一次执行一次，这边第一次调用nextTick就执行timerFunc，又因为timerFunc调用flushCallBacks的时候是异步的，nextTick是同步调用，所以当执行flushCallBacks的时候，callbacks是调用几个就有几个回调，pending就是这个用处。这边清空数组用length=0，以前还真不知道可以这样用。另外为什么要新声明一个copies，我觉得是防止nextTick里面再调用nextTick。
var callbacks = [];
var pending = false;
function flushCallbacks () {
pending = false;
var copies = callbacks.slice(0);
callbacks.length = 0;
for (var i = 0; i < copies.length; i++) {
copies[i]();
}
}
function nextTick (cb, ctx) {
var _resolve;
callbacks.push(function () {
if (cb) {
try {
cb.call(ctx);
} catch (e) {
handleError(e, ctx, 'nextTick');
}
} else if (_resolve) {
_resolve(ctx);
}
});
if (!pending) {
pending = true;
timerFunc();
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise(function (resolve) {
_resolve = resolve;
})
}
}
console.log(1);
nextTick(() => {
console.log(2);
});
console.log(3);有人会纠结事件循环是宏任务，微任务，UI渲染的顺序，那nextTick如果是微任务，怎么在UI渲染之前调用为什么还能获取最新的dom。执行下面代码看结果：
<div id="app">内容还没修改</div>
document.getElementById('app').innerText = '内容已经修改';
Promise.resolve().then(() => {
alert(document.getElementById('app').innerText + 'promise')
})
setTimeout(() => {
alert(document.getElementById('app').innerText + 'setTimeout')
})
alert(document.getElementById('app').innerText + 'end')
所以大胆得出一个结论，宏任务，微任务，UI渲染没有错，js修改了dom之后，在js里面去获取的时候，根据的是js对dom操作的结果，UI渲染只是页面的展示，并不影响js对dom元素的获取和操作。
上面是vue nextTick的源码，讲真，看别人源码还要去看一些api，然后分析为什么这样写，看着代码看明白了，一关上，就一点写不出来。
（完）