【vue源码】$nextTick实现

NO x ONE

已于 2022-06-20 10:53:19 修改

阅读量144

点赞数

分类专栏： 🌈 Vue 🌈 文章标签： javascript 前端 vue.js

于 2022-03-13 04:06:41 首次发布

本文链接：https://blog.csdn.net/Xiaoyc7/article/details/123453796

版权

🌈 Vue 🌈 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的事件循环机制，通过实例解析了Promise、微任务与宏任务的执行顺序，展示了如何在不同浏览器环境下注册和执行异步操作。通过理解这一机制，开发者可以更好地优化代码执行效率和响应性。

摘要由CSDN通过智能技术生成

直接上代码

const callbacks = [] // 任务队列

let pending = false

function flushCallbacks() {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length=0 // 清空队列
  for(let i =0,l=copies.length;i<l;i++){
    copies[i]() // 执行所有任务
  }
}

let microTimerFunc  // 默认注册微任务
let macroTimerFunc // 注册二级宏任务
let useMacroTask = false

// 微任务注册函数(Promise.then)
if(typeof Promise !=='undefined'){
  microTimerFunc = ()=>{
    Promise.resolve().then(flushCallbacks)
  }
}else{
  microTimerFunc = macroTimerFunc // 浏览器不支持Promise只能注册二级宏任务
}

// 二级宏任务注册函数(setImmediate -> MessageChannel -> setTimeout)
if(typeof setImmediate !=='undefined'){
  macroTimerFunc = ()=>{
    setImmediate(flushCallbacks)
  }
}
else if(
  typeof MessageChannel !=='undefined'
  &&MessageChannel.toString()==='[object MessageChannelConstructor]'
){
  const channel = new MessageChannel()
  const port1 = channel.port1
  const port2 = channel.port2
  port1.onmessage = flushCallbacks
  macroTimerFunc= ()=>{
    port2.postMessage(1)
  }
}
else{
  macroTimerFunc = ()=>{
    setTimeout(flushCallbacks,0)
  }
}

// 设置外层函数调用nextTick时注册二级宏任务
 function withMacroTask(fn) {
  return fn._withTask||(fn._withTask=function () {
    useMacroTask = true
    const res = fn.apply(null,arguments)
    useMacroTask = false
    return res
  })
}

 function nextTick(cb,ctx) {
  let _resolve
  callbacks.push(()=>{
    if(cb){
      cb.call(ctx)
    }else if(_resolve){ // this.$nextTick().then(()=>{...})
      _resolve(ctx)
    }
  })
  if(!pending){
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    }else{
      microTimerFunc()
    }
  }
  if(!cb&&typeof Promise !=='undefined'){
    return new Promise(resolve=>{
      _resolve = resolve
    })
  }
}

// 测试
nextTick(function(){console.log(this.name)},{name:2})
setTimeout(()=>{console.log(4)})
nextTick().then(()=>{console.log(5)})
console.log(1)
nextTick(()=>{console.log(this.name)},{name:3})
// 1 2 3 5 4