Vue.$nextTick()源碼解析

Lionad-Morotar 發布于2019-08-21 17:08 / 1593人閱讀

摘要：源碼在下用法在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。

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

用法

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

// 修改數據
vm.msg = "Hello"
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

原理

vue 在內部實現了一個任務隊列, 在當前的事件循環結束后去執行任務隊列里的回調函數(這個瀏覽器或者node的事件隊里其實差不多).

在調用$nextTick函數的時候, 會將回調函數push到之前定義的callbacks中.然后在當前的事件循環結束后去調用它們.那么重點來了, Vue是如何判斷事件循環結束了的呢?

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()
該方法用來把一些需要長時間運行的操作放在一個回調函數里,在瀏覽器完成后面的其他語句后,就立刻執行這個回調函數.不過這個只能在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)
 }
}

GPU云服務器云服務器 vue源碼 vue webrtc 源碼 nextTick() nextTick

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

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

vue源碼解析：nextTick

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

PrototypeZ 2019-08-26 10:44 評論0 收藏0
vue 源碼解析 --虛擬Dom-render

摘要：用于延遲執行一段代碼，它接受個參數回調函數和執行回調函數的上下文環境，如果沒有提供回調函數，那么將返回對象。 instance/index.js function Vue (options) { if (process.env.NODE_ENV !== production && !(this instanceof Vue) ) { warn(Vue is a ...

Tony 2019-08-26 11:00 評論0 收藏0
【Vue源碼探究一】當我們引入Vue，我們引入了什么？

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

mengbo 2019-08-20 16:30 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

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

izhuhaodev 2019-08-26 10:44 評論0 收藏0
【Vue源碼】Vue中DOM的異步更新策略以及nextTick機制

摘要：本篇文章主要是對中的異步更新策略和機制的解析，需要讀者有一定的使用經驗并且熟悉掌握事件循環模型。這個結果足以說明中的更新并非同步。二是把回調函數放入一個隊列，等待適當的時機執行。通過的主動來觸發的事件，進而把回調函數作為參與事件循環。本篇文章主要是對Vue中的DOM異步更新策略和nextTick機制的解析，需要讀者有一定的Vue使用經驗并且熟悉掌握JavaScript事件循環模型。 ...

selfimpr 2019-08-26 11:46 評論0 收藏0