vue之nextTick源碼閱讀

sugarmo 發布于2019-08-23 12:12 / 1455人閱讀

摘要：功能在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。通信代碼執行覆蓋率實現將的回調函數推入任務棧中。

功能：在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
默認使用micro, 但是公開了當需要的時候，可以配置強制使用宏任務的方法：在綁定DOM事件的時候，是強制macro

用到的知識點：

setImmediate： https://developer.mozilla.org... 事件延遲執行，可惜只有ie支持

messageChannel :https://zhuanlan.zhihu.com/p/... 又一個實現異步的方法。web通信

istanbul：代碼執行覆蓋率

實現

將nextTick的回調函數推入任務棧中。

nextTick里面的回調函數：
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  // 清空callbacks 清空棧
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    // 執行每一個方法
    copies[i]()
  }
}

export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 有可能有多個nextTick被推入到棧里面，所以將這些全部存放在callbacks里面，之后按照順序執行
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, "nextTick")
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // pending記錄是否開始執行
  if (!pending) {
    pending = true
    setTimeout(() => flushCallbacks())
  }
  // 如果沒有傳入參數，直接返回一個Promise
  if (!cb && typeof Promise !== "undefined") {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

在2.4版本之前，nextTick 就是單純的一個micro tasks,但是micro tasks的優先級太高了，所以擴展了可以將nextTick配置為macro的方法

macro tasks實現：

if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  macroTimerFunc = () => {
    // 強制宏觀實現，在瀏覽器執行完所有以后再去執行回調
    setImmediate(flushCallbacks)
  }
} else if (typeof MessageChannel !== "undefined" && (
  isNative(MessageChannel) ||
  MessageChannel.toString() === "[object MessageChannelConstructor]"
)) {
  // 使用messageChannel實現
  const channel = new MessageChannel()
  const port = channel.port2
  // 監聽flushCallbacks，當port1接受到信息的時候（也就是瀏覽器執行完所有代碼后），再去執行flushCallbacks
  channel.port1.onmessage = flushCallbacks
  macroTimerFunc = () => {
    // port2發送消息1
    port.postMessage(1)
  }
} else {
  /* istanbul ignore next */
  // 如果不支持setImmediate和MessageChannel，就用setTimeout，這個會占用很多內存，所以不是最優解法
  macroTimerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

micro tasks實現：

if (typeof Promise !== "undefined" && isNative(Promise)) {
  // 微觀是用Promise是實現的
  const p = Promise.resolve()
  microTimerFunc = () => {
    p.then(flushCallbacks)
    // in problematic UIWebViews, Promise.then doesn"t completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn"t being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    // 在有問題的UIWebViews里面，then可能不會完全的返回，不會執行 ===> 處理方式：“強制”通過添加空計時器刷新微任務隊列。（ 不明白？？）
    if (isIOS) setTimeout(noop)
  }
} else {
  // fallback to macro
  // 如果沒有promise就還是使用宏觀
  microTimerFunc = macroTimerFunc
}

以上兩個都實現了優雅降級

云服務器 GPU云服務器源碼閱讀 webrtc源碼閱讀 hbase源碼閱讀如何閱讀java源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98092.html

前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
【Vue原理】NextTick - 源碼版之宏微任務的抉擇

摘要：這么講，有點籠統，準確地說，應該是事件回調執行過程中，在主線程為空之后，異步代碼執行之前，所有通過注冊的異步代碼都是用宏任務。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【...

raise_yang 2019-08-26 18:36 評論0 收藏0
【Vue原理】NextTick - 源碼版之服務Vue

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】NextTick - 源碼版之服務Vue 初次看的兄弟可以先看【Vue原理】NextTick - 白話版簡單了解下...

Acceml 2019-08-26 18:36 評論0 收藏0
Vue源碼詳解之nextTick：MutationObserver只是浮云，microtask才是核

摘要：后來尤雨溪了解到是將回調放入的隊列。而且瀏覽器內部為了更快的響應用戶，內部可能是有多個的而的的優先級可能更高，因此對于尤雨溪采用的，甚至可能已經多次執行了的，都沒有執行的，也就導致了我們更新操原發于我的博客。前一篇文章已經詳細記述了Vue的核心執行過程。相當于已經搞定了主線劇情。后續的文章都會對其中沒有介紹的細節進行展開。現在我們就來講講其他支線任務:nextTick和micro...

陳偉 2019-08-20 14:50 評論0 收藏0
【Vue原理】NextTick - 源碼版之獨立自身

摘要：盡量把所有異步代碼放在一個宏微任務中，減少消耗加快異步代碼的執行。我們知道，如果一個異步代碼就注冊一個宏微任務的話，那么執行完全部異步代碼肯定慢很多避免頻繁地更新。中就算我們一次性修改多次數據，頁面還是只會更新一次。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5...

劉東 2019-08-26 18:36 評論0 收藏0