成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue之nextTick源碼閱讀

sugarmo / 1463人閱讀

摘要：功能在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的。通信代碼執(zhí)行覆蓋率實(shí)現(xiàn)將的回調(diào)函數(shù)推入任務(wù)棧中。

功能：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
默認(rèn)使用micro, 但是公開了當(dāng)需要的時(shí)候，可以配置強(qiáng)制使用宏任務(wù)的方法：在綁定DOM事件的時(shí)候，是強(qiáng)制macro
用到的知識(shí)點(diǎn)：

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

messageChannel :https://zhuanlan.zhihu.com/p/... 又一個(gè)實(shí)現(xiàn)異步的方法。web通信

istanbul：代碼執(zhí)行覆蓋率

實(shí)現(xiàn)

將nextTick的回調(diào)函數(shù)推入任務(wù)棧中。

nextTick里面的回調(diào)函數(shù)：
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  // 清空callbacks 清空棧
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    // 執(zhí)行每一個(gè)方法
    copies[i]()
  }
}
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 有可能有多個(gè)nextTick被推入到棧里面，所以將這些全部存放在callbacks里面，之后按照順序執(zhí)行
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, "nextTick")
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // pending記錄是否開始執(zhí)行
  if (!pending) {
    pending = true
    setTimeout(() => flushCallbacks())
  }
  // 如果沒有傳入?yún)?shù)，直接返回一個(gè)Promise
  if (!cb && typeof Promise !== "undefined") {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

在2.4版本之前，nextTick 就是單純的一個(gè)micro tasks,但是micro tasks的優(yōu)先級(jí)太高了，所以擴(kuò)展了可以將nextTick配置為macro的方法

macro tasks實(shí)現(xiàn)：

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

micro tasks實(shí)現(xiàn)：

if (typeof Promise !== "undefined" && isNative(Promise)) {
  // 微觀是用Promise是實(shí)現(xiàn)的
  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可能不會(huì)完全的返回，不會(huì)執(zhí)行 ===> 處理方式：“強(qiáng)制”通過添加空計(jì)時(shí)器刷新微任務(wù)隊(duì)列。（ 不明白？？）
    if (isIOS) setTimeout(noop)
  }
} else {
  // fallback to macro
  // 如果沒有promise就還是使用宏觀
  microTimerFunc = macroTimerFunc
}

以上兩個(gè)都實(shí)現(xiàn)了優(yōu)雅降級(jí)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98092.html

相關(guān)文章

  • 前方來報(bào)，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

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

    izhuhaodev 評(píng)論0 收藏0

  • 【Vue原理】NextTick - 源碼版 之 宏微任務(wù)的抉擇

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

    raise_yang 評(píng)論0 收藏0

  • 【Vue原理】NextTick - 源碼版 之 服務(wù)Vue

    寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧 【Vue原理】NextTick - 源碼版 之 服務(wù)Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白話版 簡(jiǎn)單了解下...

    Acceml 評(píng)論0 收藏0

  • Vue源碼詳解之nextTick：MutationObserver只是浮云，microtask才是核

    摘要：后來尤雨溪了解到是將回調(diào)放入的隊(duì)列。而且瀏覽器內(nèi)部為了更快的響應(yīng)用戶，內(nèi)部可能是有多個(gè)的而的的優(yōu)先級(jí)可能更高，因此對(duì)于尤雨溪采用的，甚至可能已經(jīng)多次執(zhí)行了的，都沒有執(zhí)行的，也就導(dǎo)致了我們更新操 原發(fā)于我的博客。 前一篇文章已經(jīng)詳細(xì)記述了Vue的核心執(zhí)行過程。相當(dāng)于已經(jīng)搞定了主線劇情。后續(xù)的文章都會(huì)對(duì)其中沒有介紹的細(xì)節(jié)進(jìn)行展開。 現(xiàn)在我們就來講講其他支線任務(wù):nextTick和micro...

    陳偉 評(píng)論0 收藏0

  • 【Vue原理】NextTick - 源碼版 之 獨(dú)立自身

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

    劉東 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<