nextTick 是什么
$nextTick:依据官网文档的解释,它能够在 DOM 更新结束之后执行一个回调函数,并返回一个 Promise(如果反对的话)
// 批改数据
vm.msg = "Hello";
// DOM 还没有更新
Vue.nextTick(function() {// DOM 更新了});
这块了解 EventLoop 的应该一看就懂,其实就是在下一次事件循环开始时开始更新 DOM,防止两头频繁的操作引起页面的重绘和回流。
这块援用官网文档:
可能你还没有留神到,Vue 在更新 DOM 时是 异步执行 的。只有侦听到数据变动,Vue 将开启一个队列,并缓冲在同一事件循环中产生的所有数据变更。如果同一个 watcher 被屡次触发,只会被推入到队列中一次。
这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作是十分重要的。而后,在下一个的事件循环“tick”中,Vue 刷新队列并执行理论 (已去重的) 工作。Vue 在外部对异步队列尝试应用原生的Promise.then
、MutationObserver
和setImmediate
,如果执行环境不反对,则会采纳setTimeout(fn, 0)
代替。
列如当设置 vm.text = 'new value'
时,该组件不会立刻从新渲染,当刷新队列时,组件会在下一个事件循环‘tick’中更新,
<div id="example">{{message}}</div>
var vm = new Vue({
el: '#example',
data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {vm.$el.textContent === 'new message' // true})
个别在设置了 this.xx='xx'
数据后,立刻失去最新的 DOM 数据时,才会用到$nextTick
,因为 DOM 的更新是异步进行的,所以获取须要用到这个办法。
- Vue 异步更新策略
更新流程(源码解析)
- 当数据被批改时,watcher 会侦听到变动,而后会将变动进行入队:
/*
* Subscriber interface.
* Will be called when a dependency changes.
*/
Watcher.prototype.update = function update() {
/* istanbul ignore else */
if (this.lazy) {this.dirty = true;} else if (this.sync) {this.run();
} else {queueWatcher(this);
}
};
- 并应用 nextTick 办法增加一个 flushScheduleQueue 回调
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
function queueWatcher(watcher) {
var id = watcher.id;
if (has[id] == null) {has[id] = true;
if (!flushing) {queue.push(watcher);
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
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 (!config.async) {flushSchedulerQueue();
return;
}
nextTick(flushSchedulerQueue);
}
}
}
- flushScheduleQueue 退出到 callback 数组中,并且异步执行
function nextTick(cb, ctx) {
var _resolve;
callbacks.push(function() {if (cb) {
try {cb.call(ctx); // !! cb 就是退出的回调
} catch (e) {handleError(e, ctx, "nextTick");
}
} else if (_resolve) {_resolve(ctx);
}
});
if (!pending) {
// 异步执行 操作 见 timerFunc
pending = true;
timerFunc();}
// $flow-disable-line
if (!cb && typeof Promise !== "undefined") {return new Promise(function(resolve) {_resolve = resolve;});
}
}
- timerFunc 操作就是异步执行了顺次判断应用:Promise.then=>MutationObserver=>setImmediate=>setTimeout
var timerFunc;
if (typeof Promise !== "undefined" && isNative(Promise)) {var p = Promise.resolve();
timerFunc = function() {p.then(flushCallbacks);
// 1. Promise.then
if (isIOS) {setTimeout(noop);
}
};
isUsingMicroTask = true;
} else if (
!isIE &&
typeof MutationObserver !== "undefined" &&
(isNative(MutationObserver) ||
MutationObserver.toString() === "[object MutationObserverConstructor]")
) {
// 2. MutationObserver
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)) {
// 3. setImmediate
timerFunc = function() {setImmediate(flushCallbacks);
};
} else {
//4. setTimeout
timerFunc = function() {setTimeout(flushCallbacks, 0);
};
}
- flushCallbacks 遍历所有的 callbacks 并执行
function flushCallbacks() {
pending = false;
var copies = callbacks.slice(0);
callbacks.length = 0;
for (var i = 0; i < copies.length; i++) {copies[i]();}
}
- 其中就有后面退出的 flushScheduleQueue,利用 queue 中的 watcher 的 run 办法,更新组件
for (index = 0; index < queue.length; index++) {watcher = queue[index];
watcher.run();}
总结
以上就是 vue 的 nextTick 办法的实现原理了,总结一下就是:
- Vue 用异步队列的形式来管制 DOM 更新和 nextTick 回调先后执行
- microtask 因为其高优先级个性,能确保队列中的微工作在一次事件循环前被执行结束
- 因为兼容性问题,vue 不得不做了 microtask 向 macrotask 的降级计划
参考
- Vue-nextTick 源码地址
- 全面解析 Vue.nextTick 实现原理