这是一篇继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) } } else { timerFunc = () => { setTimeout(nextTickHandler, 0) // 重点 } } return function queueNextTick (cb, ctx) { // api的使用方式 let _resolve callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { err } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { pending = true timerFunc() } if (!cb && typeof Promise !== 'undefined') { return new Promise((resolve, reject) => { _resolve =resolve }) } } })() // 自执行函数
大致看一下源码可以了解到nextTick api是一个自执行函数
既然是自执行函数,直接看它的return类型,return function queueNextTick (cb, ctx) {...}
return function queueNextTick (cb, ctx) { // api的使用方式 let _resolve callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { err } } else if (_resolve) { _resolve(ctx) } }) if (!pending) { pending = true timerFunc() } if (!cb && typeof Promise !== 'undefined') { return new Promise((resolve, reject) => { _resolve =resolve }) } }
只关注主流程queueNextTick函数把我们传入的() => { // todo... } 推入了callbacks内
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) } } else { timerFunc = () => { setTimeout(nextTickHandler, 0) // 重点 } }
这一段我们可以看到标注的三个点表明在不同浏览器环境下使用Promise, MutationObserver或setTimeout(fn, 0) 来执行nextTickHandler
function nextTickHandler () { pending = false const copies = callbacks.slice(0) // 复制 callbacks.length = 0 // 清空 for (let i = 0; i < copies.length; i++) { copies[i]() // 逐个执行 } }
nextTickHandler就是把我们之前放入callbacks的 () => { // todo... } 在当前tasks内执行。
写一个简单的nextTick
源码可能比较绕,我们自己写一段简单的nextTick
const simpleNextTick = (function () { let callbacks = [] let timerFunc return function queueNextTick (cb) { callbacks.push(() => { // 给callbacks 推入cb() cb() }) timerFunc = () => { return Promise.resolve().then(() => { const fn = callbacks.shift() fn() }) } timerFunc() // 执行timerFunc,返回到是一个Promise } })() simpleNextTick(() => { setTimeout(console.log, 3000, 'nextTick') })
我们可以从这里看出nextTick的原理就是返回出一个Promise,而我们todo的代码在这个Promise中执行,现在我们还可以继续简化
const simpleNextTick = (function () { return function queueNextTick (cb) { timerFunc = () => { return Promise.resolve().then(() => { cb() }) } timerFunc() } })() simpleNextTick(() => { setTimeout(console.log, 3000, 'nextTick') })
直接写成这样。
const simpleNextTick = function queueNextTick (cb) { timerFunc = () => { return Promise.resolve().then(() => { cb() }) } timerFunc() } simpleNextTick(() => { setTimeout(console.log, 3000, 'nextTick') })
这次我们把自执行函数也简化掉
const simpleNextTick = function queueNextTick (cb) { return Promise.resolve().then(cb) } simpleNextTick(() => { setTimeout(console.log, 3000, 'nextTick') })
现在我们直接简化到最后,现在发现nextTick最核心的内容就是Promise,一个microtask。
现在我们回到vue的nextTick API官方示例
<div id="example">{{message}}</div> var vm = new Vue({ el: '#example', data: { message: '123' } }) vm.message = 'new message' // 更改数据 vm.$el.textContent === 'new message' // false Vue.nextTick(function () { vm.$el.textContent === 'new message' // true })
原来在vue内数据的更新后dom更新是要在下一个事件循环后执行的。
nextTick的使用原则主要就是解决单一事件更新数据后立即操作dom的场景。
既然我们知道了nextTick核心是利用microTasks,那么我们把简化过的nextTick和开头的sleep函数对照一下。
const simpleNextTick = function queueNextTick (cb) { return Promise.resolve().then(cb) } simpleNextTick(() => { setTimeout(console.log, 3000, 'nextTick') // 也可以换成ajax请求 })
function sleep (ms) { return new Promise(resolve => setTimeout(resolve, ms) // 也可以换成ajax请求 } async function oneTick (ms) { console.log('start') await sleep(ms) console.log('end') } oneTick(3000)
我们看出nextTick和我么写的oneTick的执行结果是那么的相似。区别只在于nextTick是把callback包裹一个Promise返回并执行,而oneTick是用await执行一个Promise函数,而这个Promise有自己包裹的webapi函数。
那在用ajax请求的时候我们是不是直接这样使用axios可以返回Promise的库
async function getData () { const data = await axios.get(url) // 操作data的数据来改变dom return data }
这样也可以达到同nextTick同样的作用
最后我们也可以从源码中看出,当浏览器环境不支持Promise时可以使用MutationObserver或setTimeout(cb, 0) 来达到同样的效果。但最终的核心是microTask
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍浅谈Javascript实现继承的方法,包括了浅谈Javascript实现继承的方法的使用技巧和注意事项,需要的朋友参考一下 S1:js中一切皆对象,想想如果要实现对父对象属性和方法的继承,最初我们会怎样子来实现呢,考虑到原型的概念,最初我是这样来实现继承的 从上面可以看到实现对Parent的继承主要是覆写了Son的prototype,这样便把Parent的属性和方法过给了Son的原
本文向大家介绍浅谈Servlet 实现网页重定向的方法,包括了浅谈Servlet 实现网页重定向的方法的使用技巧和注意事项,需要的朋友参考一下 本文介绍了Servlet 实现重定向的方法,分享给大家,具体如下: HttpServletResponse 服务器响应客户端请求时,就要用到HttpServletResponse接口。设置响应的类型可以使用setContentType()方法。发送字符数据
本文向大家介绍浅谈Python实现2种文件复制的方法,包括了浅谈Python实现2种文件复制的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例主要实现Python中的文件复制操作,有两种方法,具体实现代码如下所示: 总结 以上就是本文关于浅谈Python实现2种文件复制的方法的全部内容,希望对大家有所帮助。感兴趣的朋友可以继续参阅本站其他相关专题,如有不足之处,欢迎留言指出。感谢朋友们对本站
本文向大家介绍浅谈Java的两种多线程实现方式,包括了浅谈Java的两种多线程实现方式的使用技巧和注意事项,需要的朋友参考一下 本文介绍了浅谈Java的两种多线程实现方式,分享给大家。具有如下: 一、创建多线程的两种方式 Java中,有两种方式可以创建多线程: 1 通过继承Thread类,重写Thread的run()方法,将线程运行的逻辑放在其中 2 通过实现Runnable接口,实例化Threa
本文向大家介绍谈谈Python的深浅拷贝?以及实现方法和应用场景。相关面试题,主要包含被问及谈谈Python的深浅拷贝?以及实现方法和应用场景。时的应答技巧和注意事项,需要的朋友参考一下 浅拷贝只是增加了一个指针指向一个存在的地址, 而深拷贝是增加一个指针并且开辟了新的内存,这个增加的指针指向这个新的内存, 采用浅拷贝的情况,释放内存,会释放同一内存,深拷贝就不会出现释放同一内存的错误 一层的情况
本文向大家介绍浅谈线性表的原理及简单实现方法,包括了浅谈线性表的原理及简单实现方法的使用技巧和注意事项,需要的朋友参考一下 一、线性表 原理:零个或多个同类数据元素的有限序列 原理图: 特点 : 1、有序性 2、有限性 3、同类型元素 4、第一个元素无前驱,最后一个元素无后继,中间的元素有一个前驱并且有一个后继 线性表是一种逻辑上的数据结构,在物理上一般有两种实现 顺序实现和链表实现 二、基于数组