vue如何sleep_浅谈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') {