[vue2]熬夜编写为了让你们通俗易懂的去深入理解nextTick原理

499 阅读3分钟

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

更多文章

[vue2]熬夜编写为了让你们通俗易懂的去深入理解vue-router并手写一个

[vue2]熬夜编写为了让你们通俗易懂的去深入理解vuex并手写一个

[vue2]熬夜编写为了让你们通俗易懂的去深入理解v-model原理

[vue2]熬夜编写为了让你们通俗易懂的去深入理解双向绑定以及解决监听Array数组变化问题

熬夜不易,点个赞再走吧

概念

nextTick: nextTick主要是使用了宏任务 (macrotask) 和微任务 (microtask) ,定义了一个异步方法,多次调用 nextTick 会将方法存入callback队列中,通过这个异步方法清空当前队列

macrotask: setTimeout, setInterval, setImmediate, I/O, UI rendering

microtasks: process.nextTick, Promise, MutationObserver

顺序

任务队列中,在每一次事件循环中,macrotask只会提取一个执行

microtask会一直提取,直到microsoft队列为空为止

主线程执行完成该任务后又会检查microtasks队列并完成里面的所有任务后再执行macrotask

场景

在数据变化后要执行的某个操作,并随着操作需要改变dom更新的时候 在 created 或者 mounted 阶段,需要操作后更新dom时

如果先执行了nextTick再更新数据会无效

nextTick和$nextTick:

nextTick(callback):

全局方法,当数据发生变化,更新后执行回调

$nextTick(callback):

实例方法,自动把context参数绑定为调用它的实例,当dom发生变化,更新后执行的回调,一般会使用this. $nextTick

原理

  1. 调用nextTick并传入两个参数:回调函数cb和回调函数的执行上下文ctx 判断是否有回调函数
  2. 有就存入队列
  3. 没有就返回promise
  4. 判断是否在执行回调函数
  5. 如果没有则执行timeFunc异步方法,多次执行nextTick只会执行一次timerFunc
  6. timeFunc中选择一个异步方法:

(1)先尝试 promise 回调,进行异步执行flushCallbacks

(2)若不支持则继续尝试 MutationObserver 回调,会创建一个文本节点进行监听

(3)若不支持则继续尝试 setImmediate 回调,在setImmediate下执行flushCallbacks

(4)都不支持则使用 setTimeout(flushCallbacks, 0) 执行flushCallbacks方法

源码

nextTick

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  
  // 将拿到的回调函数存放到数组中
  callbacks.push(() => { 
    if (cb) {
      try { // 错误捕获
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 如果当前没有在执行,就会执行timeFunc
  if (!pending) { 
  
   //标记正在执行
    pending = true 
  
    // 多次执行nextTick只会执行一次,timerFunc就是一个异步方法
    timerFunc() 
  }
}

timeFunc

// 判断是否原生支持promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  
  // flushCallbacks就包裹了一个promise
  timerFunc = () => { 
   // 如果支持则异步的去执行flushCallbacks
    p.then(flushCallbacks) 
    if (isIOS) setTimeout(noop)
  }
  
  // 标记微任务
  isUsingMicroTask = true 
  // 判断是否原生支持MutationObserverelse if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // 也是一个微任务
  let counter = 1
  
  // new了一个MutationObserver类
  const observer = new MutationObserver(flushCallbacks) 
  
  // 创建了一个文本节点
  const textNode = document.createTextNode(String(counter))
  
  // 原生api,帮我们监听一个节点
  // 当数据发生变化了就会异步执行flushCallbacks方法
  observer.observe(textNode, { 
    characterDatatrue 
  })
  
  timerFunc = () => {
    counter = (counter + 1) % 2
    // 数据更新
    textNode.data = String(counter)
  }
  // 标记微任务
  isUsingMicroTask = true
  // 判断是否原生支持setImmediateelse if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { 
  // setImmediate原生方法,默认ie下有,高版本的谷歌也支持
  timerFunc = () => {
   // 直接执行
    setImmediate(flushCallbacks)
  }
else {
  // 如果以上都不支持则采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

flushCallbacks

// 回调函数队列
const callbacks = [] 
// 空闲状态准备执行
let pending = false 
 // 多个nextTick中传递的回调函数依次执行
function flushCallbacks () {
  pending = false
  // 拷贝一份禁止套娃
  const copies = callbacks.slice(0) 
  
  // 清空队列
  callbacks.length = 0 
  
  // cb执行过程中可能又会往callbacks中加入内容
  // 遍历完拷贝的队列,新任务在下一轮存入callbacks执行
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

问答

问:什么是宏任务和微任务?知道Event Loop吗?

推荐一篇文章: 这一次,彻底弄懂 JavaScript 执行机制