介绍
小编给大家分享一下Vue2.6中的nextTick方法是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
浅析Vue 2.6 <强> 强中的<强> nextTick 强方法。
<强>事件循环
JS的<强>事件循环和<强>任务队列强其实是理解nextTick概念的关键。
这个网上其实有很多优质的文章做了详细介绍,我就简单过过了。
以下内容适用于浏览器端JS, NodeJS的事件循环机制并不相同。
规范中规定任务分为两大类:<代码>任务(macrotask) 和<代码> microtask>
通常认为是<代码> 任务的任务源:
setTimeout和setInterval
setImmediate
MessageChannel
I/O
UI呈现 通常认为是<代码> microtask> 的承诺
process.nextTick
MutationObserver
对象。观察(已废弃) 简单概况:(这里是官方规范)
<李> 首先开始<强>执行脚本脚本强,直到执行上下文栈为空时,开始清空<强> microtask队列里的任务,队列嘛,先入先出,出一个执行一个,清空完毕,走事件循环。
<李> <强>事件循环:不断地去取<强>任务队列强劲的中的一个任务推入栈中执行,并在当次循环里依次清空<强> microtask队列里的任务,清空之后,可能会触发页面更新渲染(由浏览器决定)。
<李> 之后重复<强>事件循环步骤。
<强> nextTick
Vue中数据的变化到DOM的更新渲染是一个异步过程。
此方法便用于在DOM更新循环结束之后执行延迟回调。
使用方法很简单:
//修改数据
vm。味精=& # 39;你好# 39;;//DOM还没有更新
Vue.nextTick(函数(){//DOM更新了
});//作为一个承诺使用
Vue.nextTick(),然后(函数(){//DOM更新了
}); 源码去除注释,其实也只有不到一百来行,整体还是很容易理解的。
这里划成3个部分介绍。
模块变量
介绍引入的模块和定义的变量。
//等待空函数,可用作函数占位符
进口{等待}& # 39;共享/util # 39;;//Vue内部的错误处理函数
从& # 39;进口{handleError}。/错误# 39;;//判断是IE/IOS/内置函数
进口{isIE、isIOS isNative} & # 39;。/env # 39;;//使用MicroTask的标识符
出口让isUsingMicroTask=false;//以数组形式存储执行的函数
const回调=[];//nextTick执行状态
让等待=false;//遍历函数数组执行每一项函数
函数flushCallbacks () {
等待=false;
const=callbacks.slice副本(0);
回调。长度=0;
(让我=0;我& lt;copies.length;我+ +){
[我]副本();
}
} 异步延迟函数
接下来是核心的<强>异步延迟函数强。这里不同的Vue版本采用的策略其实并不相同。
2.6 <强> 强版本优先使用<强> microtask 作为异步延迟包装器。
2.5 <强> 强版本则是<强> macrotask结合microtask 强。然而,在重绘之前状态改变时会有小问题(如# 6813)。此外,在事件处理程序中使用<强> macrotask 会导致一些无法规避的奇怪行为(如# 7109,# 7153,# 7546,# 7834,# 8109)。
所以2.6 <强> 强版本现在又改用<强> microtask 强了,为什么是又呢,因为2.4 <强> 强版本及之前也是用的<强> microtask …
<强> microtask 在某些情况下也是会有问题的,因为<强> microtask 强优先级比较高,事件会在顺序事件(如# 4521,# 6690有变通方法)之间甚至在同一事件的冒泡过程中触发(# 6566)。
//核心的异步延迟函数,用于异步延迟调用flushCallbacks函数
让timerFunc;//timerFunc优先使用原生的承诺//原本MutationObserver支持更广,但在iOS祝辞=9.3.3的UIWebView中,触摸事件处理程序中触发会产生严重错误
如果(typeof承诺!==& # 39;未定义# 39;,,isNative(承诺)){
const p=Promise.resolve ();
timerFunc=()=比;{
p.then (flushCallbacks);//IOS的UIWebView,承诺。然后回调被推入microtask队列但是队列可能不会如期执行。//因此,添加一个空计时器”强制“执行microtask队列。
如果isIOS setTimeout(等待);
};
isUsingMicroTask=true;//当原生承诺不可用时,timerFunc使用原生MutationObserver//如PhantomJS iOS7, Android 4.4//问题# 6466 MutationObserver在IE11并不可靠,所以这里排除了IE
}else if (
isIE !,,
typeof MutationObserver !==& # 39;未定义# 39;,,
(isNative (MutationObserver) | |//PhantomJS和iOS 7. x
MutationObserver.toString()===& # 39;[对象MutationObserverConstructor] & # 39;)
) {
让counter=1;
const观察者=new MutationObserver (flushCallbacks);
const textNode=document.createTextNode (String(柜台));
观察者。观察(textNode, {
characterData:没错,
});
timerFunc=()=比;{
counter=(计数器+ 1)% 2;
textNode。data=https://www.yisu.com/zixun/String(柜台);
};
isUsingMicroTask=true;//如果原生setImmediate可用,timerFunc使用原生setImmediate
}else if (typeof setImmediate !==ㄒ濉? & isNative (setImmediate)) {
timerFunc=()=> {
setImmediate (flushCallbacks);
};
其他}{//最后的倔强,timerFunc使用setTimeout
timerFunc=()=> {
setTimeout (flushCallbacks, 0);
};
}
