浅谈Vue.nextTick的实现方法资源-CSDN文库

49 浏览量 2021-01-19 16:16:55 上传评论收藏 58KB PDF 举报

资源推荐

资源详情

资源评论

浅谈浅谈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)

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38550834

粉丝: 4
资源: 964

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip