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

資訊專欄INFORMATION COLUMN

Vue.$nextTick()源碼解析

Lionad-Morotar / 1600人閱讀

摘要：源碼在下用法在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的。

源碼在src/core/util/next-tick.js下

用法

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

// 修改數(shù)據(jù)
vm.msg = "Hello"
// DOM 還沒(méi)有更新
Vue.nextTick(function () {
  // DOM 更新了
})
原理

vue 在內(nèi)部實(shí)現(xiàn)了一個(gè)任務(wù)隊(duì)列, 在當(dāng)前的事件循環(huán)結(jié)束后去執(zhí)行任務(wù)隊(duì)列里的回調(diào)函數(shù)(這個(gè)瀏覽器或者node的事件隊(duì)里其實(shí)差不多).

在調(diào)用$nextTick函數(shù)的時(shí)候, 會(huì)將回調(diào)函數(shù)push到之前定義的callbacks中.然后在當(dāng)前的事件循環(huán)結(jié)束后去調(diào)用它們.那么重點(diǎn)來(lái)了, Vue是如何判斷事件循環(huán)結(jié)束了的呢?

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)
    }
  })
  if (!pending) {
    pending = true
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== "undefined") {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

window.setImmediate()
該方法用來(lái)把一些需要長(zhǎng)時(shí)間運(yùn)行的操作放在一個(gè)回調(diào)函數(shù)里,在瀏覽器完成后面的其他語(yǔ)句后,就立刻執(zhí)行這個(gè)回調(diào)函數(shù).不過(guò)這個(gè)只能在ie中用

if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
}

https://developer.mozilla.org...

channel message api

該方法主要用于不同的上下文之間的通信.
else if (typeof MessageChannel !== "undefined" && (
 isNative(MessageChannel) ||
 // PhantomJS
 MessageChannel.toString() === "[object MessageChannelConstructor]"
)) {
 const channel = new MessageChannel()
 const port = channel.port2
 channel.port1.onmessage = flushCallbacks
 macroTimerFunc = () => {
   port.postMessage(1)
 }
}

setTimeout

else {
 /* istanbul ignore next */
 macroTimerFunc = () => {
   setTimeout(flushCallbacks, 0)
 }
}

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

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

相關(guān)文章

  • vue源碼解析：nextTick

    摘要：對(duì)屬性值進(jìn)行修改操作時(shí)，如，實(shí)際上會(huì)觸發(fā)。下面看源碼，為方便越讀，源碼有刪減。總結(jié)為了保證性能，會(huì)把修改添加到異步任務(wù)，所有同步代碼執(zhí)行完成后再統(tǒng)一修改，一次事件循環(huán)中的多次數(shù)據(jù)修改只會(huì)觸發(fā)一次。 1 nextTick的使用 vue中dom的更像并不是實(shí)時(shí)的，當(dāng)數(shù)據(jù)改變后，vue會(huì)把渲染watcher添加到異步隊(duì)列，異步執(zhí)行，同步代碼執(zhí)行完成后再統(tǒng)一修改dom，我們看下面的代碼。 ...

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

  • vue 源碼解析 --虛擬Dom-render

    摘要：用于延遲執(zhí)行一段代碼，它接受個(gè)參數(shù)回調(diào)函數(shù)和執(zhí)行回調(diào)函數(shù)的上下文環(huán)境，如果沒(méi)有提供回調(diào)函數(shù)，那么將返回對(duì)象。 instance/index.js function Vue (options) { if (process.env.NODE_ENV !== production && !(this instanceof Vue) ) { warn(Vue is a ...

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

  • 【Vue源碼探究一】當(dāng)我們引入Vue，我們引入了什么？

    摘要：源碼版本構(gòu)造器實(shí)例選項(xiàng)讓我們用一段展示一下這三個(gè)概念其中的構(gòu)造器實(shí)例實(shí)例名可以任意取，這里我們便于理解保持和文檔一致選項(xiàng)即為傳入構(gòu)造器里的配置選項(xiàng)。其實(shí)構(gòu)造器上也綁了不少好用的方法。 源碼版本：2.0.5 構(gòu)造器、實(shí)例、選項(xiàng) 讓我們用一段demo展示一下這三個(gè)概念： //HTML {{ message }} //JS var vm = new Vue({ el: #app,...

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

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

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

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

  • 【Vue源碼】Vue中DOM的異步更新策略以及nextTick機(jī)制

    摘要：本篇文章主要是對(duì)中的異步更新策略和機(jī)制的解析，需要讀者有一定的使用經(jīng)驗(yàn)并且熟悉掌握事件循環(huán)模型。這個(gè)結(jié)果足以說(shuō)明中的更新并非同步。二是把回調(diào)函數(shù)放入一個(gè)隊(duì)列，等待適當(dāng)?shù)臅r(shí)機(jī)執(zhí)行。通過(guò)的主動(dòng)來(lái)觸發(fā)的事件，進(jìn)而把回調(diào)函數(shù)作為參與事件循環(huán)。 本篇文章主要是對(duì)Vue中的DOM異步更新策略和nextTick機(jī)制的解析，需要讀者有一定的Vue使用經(jīng)驗(yàn)并且熟悉掌握J(rèn)avaScript事件循環(huán)模型。 ...

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

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

0條評(píng)論

閱讀需要支付1元查看
<