欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈Vue.nextTick 的实现方法

程序员文章站 2022-09-08 09:07:56
这是一篇继event loop和microtask 后的vue.nexttick api实现的源码解析。 预热,写一个sleep函数 function slee...

这是一篇继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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。