浅谈浅谈Vue.nextTick 的实现方法的实现方法
这是一篇继event loop和MicroTask 后的vue.nextTick API实现的源码解析。
预热，写一个预热，写一个sleep函数函数
function sleep (ms) {
return new Promise(resolve => setTimeout(resolve, ms)
}
async function oneTick (ms) {
console.log('start')
await sleep(ms)
console.log('end')
}
oneTick(3000)
解释下sleep函数
async 函数进行await PromiseFn()时函数执行是暂停的，我们也知道现在这个PromiseFn是在microTask内执行。当microTask
没执行完毕时，后面的macroTask是不会执行的，我们也就通过microTask在event loop的特性实现了一个sleep函数，阻止了
console.log的执行
流程
1执行console.log(‘start’)
2执行await 执行暂停，等待await函数后的PromiseFn在microTask执行完毕
3在sleep函数内，延迟ms返回
4返回resolve后执行console.log(‘end’)
nextTick API
vue中nextTick的使用方法
vue.nextTick(() => {
// todo...
})
了解用法后看一下源码
const nextTick = (function () {
const callbacks = [] let pending = false
let timerFunc // 定时函数
function nextTickHandler () {
pending = false
const copies = callbacks.slice(0) // 复制
callbacks.length = 0 // 清空
for (let i = 0; i < copies.length; i++) {
copies[i]() // 逐个执行
}
}
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError) // 重点
}
} else if ('!isIE MutationObserver') {
var counter = 1
var observer = new MutationObserver(nextTickHandler) // 重点
var textNode = document.createTextNode(string(conter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
资源评论
