Vue.js nextTick 源码分析
nextTick
vue版本
2.6.11
源码分析(nextTick)
nextTick源码调用过程总结：
init->timerFunc = (Promise/MutationObserver/setImmediate) 初始化阶段为timerFunc的执行方式赋值，一般来说在Windows浏览器环境下运行timerFunc函数的执行方式都会是Promise.then的方式，使用微任务队列的方式。
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
timerFunc = function () {
p.then(flushCallbacks);
if (isIOS) { setTimeout(noop); }
};
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(fn)->callbacks.push(function(){fn.call(this)})->timerFunc() 使用nextTick的源码如下：
function nextTick (cb, ctx) {
console.log('vue nexttick')
var _resolve;
callbacks.push(function () { // 全局变量callbacks
if (cb) {
try {
cb.call(ctx); // 这里调用回调
} catch (e) {
handleError(e, ctx, 'nextTick');
}
} else if (_resolve) {
_resolve(ctx);
}
});
if (!pending) {
pending = true; // 只执行一次timerFunc函数
timerFunc();
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(function (resolve) {
_resolve = resolve;
})
}
}如上所示，在一次宏任务中执行多次nextTick只会调用一次timerFunc()，timerFunc()会将flushCallbacks函数放入JavaScript的微任务队列中，待顺序调用。
......
var p = Promise.resolve();
timerFunc = function () {
p.then(flushCallbacks);
if (isIOS) { setTimeout(noop); }
};
......
function flushCallbacks () {
pending = false;
var copies = callbacks.slice(0);
callbacks.length = 0;
for (var i = 0; i < copies.length; i++) {
copies[i]();
}
}其次，$nextTick()是即时调用的,并且会将传入的函数的this值变成当前Vue实例
Vue.prototype.$nextTick = function (fn) {
return nextTick(fn, this)
};源码分析(set过程)
Vue对每个组件中的data都做了数据代理（截持）,对data对象中的数据进行赋值操作，实际就会调用defineProperty中的reactiveSetter函数，进行一系列操作，包括通知Watcher数据改变了等等。
其中setter源代码如下，不止进行赋值操作，还会调用dep.notify()通知数据改变了:
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val;
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter();
}
if (getter && !setter) { return }
if (setter) {
setter.call(obj, newVal); // 这里进行赋值操作
} else {
val = newVal;
}
childOb = !shallow && observe(newVal);
dep.notify(); // 这里进行通知
}Dep对象主要作用是记录当前组件依赖的Watcher(?不清楚，之后再来看)
总而言之，调用了Dep原型上的notify函数,再接着调用Watcher原型上的update方法
Dep.prototype.notify = function notify () {
var subs = this.subs.slice();
if (process.env.NODE_ENV !== 'production' && !config.async) {
subs.sort(function (a, b) { return a.id - b.id; });
}
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
};update方法,这里调用了关键的queueWatcher函数
Watcher.prototype.update = function update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true;
} else if (this.sync) {
this.run();
} else {
queueWatcher(this);
}
};queueWatcher函数做了两件关键的事1、向queue变量中push watcher 2、调用一次nextTick,将flushSchedulerQueue塞进微任务队列。 重要：也就是说，只要在宏任务运行过程中对data进行了一次赋值,就会往微任务队列中塞一个flushSchedulerQueue函数的微任务（一般是Promise）。waiting只会在flushSchedulerQueue执行之后再次赋为false
function queueWatcher (watcher) {
var id = watcher.id;
if (has[id] == null) {
has[id] = true;
if (!flushing) {
queue.push(watcher); // 加入queue
} else {
var i = queue.length - 1;
while (i > index && queue[i].id > watcher.id) {
i--;
}
queue.splice(i + 1, 0, watcher);
}
// queue the flush
if (!waiting) {
waiting = true;
if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue();
return
}
nextTick(flushSchedulerQueue); // nextTick flushSchedulerQueue
}
}
}关键：flushSchedulerQueue函数做了什么： 1、遍历queue变量，取得watcher 2、watcher.before()调用，这个时候就是组件生命周期中的beforeUpdate回调通知的时候。 3、watcher.run()调用，如果watcher对应的组件有配置watch，就是这个时候执行回调，并且进行数据和DOM更新。 4、resetSchedulerState()调用，将waiting=false，此时数据已经更新完毕，下次触发reactiveSetter，则重新调用nextTick 5、callUpdatedHooks,callActivatedHooks调用，分别对应生命周期中的activated和updated
function flushSchedulerQueue () {
// debugger
currentFlushTimestamp = getNow();
flushing = true;
var watcher, id;
queue.sort(function (a, b) { return a.id - b.id; });
for (index = 0; index < queue.length; index++) {
watcher = queue[index];
if (watcher.before) {
watcher.before(); // beforeUpdate回调(如果before属性存在的话)
}
id = watcher.id;
has[id] = null;
watcher.run(); // 如果有配置watche监视属性
// .... loop报错提醒 ....
}
// keep copies of post queues before resetting state
var activatedQueue = activatedChildren.slice();
var updatedQueue = queue.slice();
resetSchedulerState();
// call component updated and activated hooks
callActivatedHooks(activatedQueue);
callUpdatedHooks(updatedQueue);
// devtool hook
/* istanbul ignore if */
if (devtools && config.devtools) {
devtools.emit('flush');
}
}实例分析
这是我自己刚刚碰到的案例，组件中触发以下代码：
const pro = new Promise((resolve, reject)=>{
console.log('promise immediate 111')
resolve('ok')
}).then(()=>{
console.log('promise then 111')
})
this.$nextTick(()=>{
console.log('nexcTick 111')
})
new Promise((resolve, reject)=>{
console.log('promise immediate 222')
resolve('ok')
}).then(()=>{
console.log('promise then 222')
})
this.$nextTick(()=>{
console.log('nexcTick 222')
})
this.visible = false // 数据操作
this.$nextTick(()=>{
console.log('nexcTick 333')
})以上代码，按照我一开始的认知，输出顺序应该是：promise immediate 111 promise immediate 222 nexcTick 111 promise then 222 nexcTick 222 nexcTick 333但其实不然，操作数据触发了reactiveSetter，它实际加入微任务队列的顺序是：1、promise then 111 微任务1 2、nexcTick 111 -> callbacks 3、flushCallbacks函数 微任务24、promise then 222 微任务3 5、nexcTick 222 -> callbacks 6、setter调用, flushSchedulerQueue -> callbacks7、nexcTick 333 -> callbacks 在Vue源码nextTick函数中加入console输出，验证猜想：
function nextTick (cb, ctx) {
var _resolve;
console.log(`${cb.name?cb.name:'箭头函数'}加入了callbacks`)
callbacks.push(...);
if (!pending) {
pending = true;
timerFunc();
}
}结果：
总结
setter触发时的总过程: 1、reactiveSetter。这里首先改变data对象中的值,但是DOM尚未更新，可以说先存着2、dep.notify。这里通知该组件[依赖]的每个watcher 3、Watcher.update。这里调用queueWatcher，让wacher入队列，为更新做准备。另：如果强制同步更新DOM的话，这里就执行this.run(),执行对应的DOM更新操作。 4、queueWatcher。这里让watcher入待执行队列，并且如果是本次更新操作第一次setter，则调用nextTick函数，让flushSchedulerQueue函数加入微任务队列。 5、flushSchedulerQueue。这里函数开始执行，代表宏任务已经执行完毕，开始执行微任务队列，这里将经过beforeUpdate->更新DOM->updated的过程
nextTick触发时的总过程: 0、timerFunc赋值。根据操作系统不同，一般是Promise方式执行异步任务。 1、nextTick。往callbacks队列中加入一个待执行的回调，如果是一个更新周期中初次执行该函数，则调用timerFunc，将flushCallbacks函数加入微任务队列。 2、flushCallbacks。这里依次遍历callbacks队列中的待执行任务，顺序执行，此时可能有用户自己调用的nextTick回调，也有可能中途执行了setter操作，插入了flushSchedulerQueue回调。在flushSchedulerQueue任务前后执行代码， 情况完全不同，这也是为什么在编写代码的过程中可能出现不符合预期的情况。
总结： Vue中对于微任务的处理，虽然只插入一个微任务，但是数组方式存的待执行任务，就算是后执行的setter或者nextTick，都能排在第一个nextTick或者setter调用时的优先顺序执行。有种插队的感觉。
部分未提及源码
flushSchedulerQueue中watcher.before函数,对应beforeUpdate生命周期
new Watcher(vm, updateComponent, noop, {
before: function before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate');
}
}
}, true /* isRenderWatcher */);flushSchedulerQueue中watcher.run函数,此时进行数据更新
Watcher.prototype.run = function run () {
if (this.active) {
var value = this.get();
if (
value !== this.value ||
isObject(value) ||
this.deep
) {
// set new value
var oldValue = this.value;
this.value = value;
if (this.user) {
var info = "callback for watcher \"" + (this.expression) + "\"";
invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info);
} else {
this.cb.call(this.vm, value, oldValue); // 这里是watch回调
}
}
}
};flushSchedulerQueue中callUpdatedHooks函数，生命周期updated
function callUpdatedHooks (queue) {
var i = queue.length;
while (i--) {
var watcher = queue[i];
var vm = watcher.vm;
if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'updated');
}
}
}腾讯云开发者
