nextTick作用:在下次DOM更新循环结束之后执行的延迟回调
首先nextTick并不是浏览器本身提供的一个异步API,而是Vue中,用过由浏览器本身提供的原生异步API封装而成的一个异步封装方法。
它对于浏览器异步API的选用规则如下,Promise存在取由Promise.then,不存在Promise则取MutationObserver,MutationObserver不存在setImmediate,setImmediate不存在最后取setTimeout来实现。
nextTick即有可能是微任务,也有可能是宏任务,从优先去Promise和MutationObserver可以看出nextTick优先微任务,其次是setImmediate和setTimeout宏任务。
同步代码执行完毕之后,优先执行微任务,其次才会执行宏任务
setTimeout(() => {
console.log("settimeout 1");
}, 0);
console.log("同步 1");
Promise.resolve().then(() => {
console.log("promise 1");
});
this.$nextTick(() => {
console.log("nexttick");
});
Promise.resolve().then(() => {
console.log("promise 2");
});
console.log("同步 2");
setTimeout(() => {
console.log("settimeout 2");
}, 0);
实现一个nextTick
public myNextTick(callback: Function) {
return Promise.resolve().then(() => {
callback();
});
}