浅谈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) } } 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: jquery select插件异步实时搜索实例代码
下一篇: 草莓大餐,给你不同的视觉盛宴