摘要:而中的回調函數則會在頁面渲染后才執行。還使用方法復制數組并把數組清空,這里的數組就是存放主線程執行過程中的函數所傳的回調函數集合主線程可能會多次使用方法。到這里就已經實現了根據環境選擇異步方法,并在異步方法中依次調用傳入方法的回調函數。
Vue.nextTick的應用場景
Vue 是采用異步的方式執行 DOM 更新。只要觀察到數據變化,Vue 將開啟一個隊列,并緩沖同一事件循環中發生的所有數據改變。然后,在下一個的事件循環中,Vue 刷新隊列并執行頁面渲染工作。所以修改數據后DOM并不會立刻被重新渲染,如果想在數據更新后對頁面執行DOM操作,可以在數據變化之后立即使用 Vue.nextTick(callback)。
下面這一段摘自vue官方文檔,關于JS 運行機制的說明:
JS 執行是單線程的,它是基于事件循環的。事件循環大致分為以下幾個步驟:
(1)所有同步任務都在主線程上執行,形成一個執行棧(execution context stack)。
(2)主線程之外,還存在一個"任務隊列"(task queue)。只要異步任務有了運行結果,就在"任務隊列"之中放置一個事件。
(3)一旦"執行棧"中的所有同步任務執行完畢,系統就會讀取"任務隊列",看看里面有哪些事件。那些對應的異步任務,于是結束等待狀態,進入執行棧,開始執行。
(4)主線程不斷重復上面的第三步。
在主線程中執行修改數據這一同步任務,DOM的渲染事件就會被放到“任務隊列”中,當“執行棧”中同步任務執行完畢,本次事件循環結束,系統才會讀取并執行“任務隊列”中的頁面渲染事件。而Vue.nextTick中的回調函數則會在頁面渲染后才執行。
例子如下:
{{test}}
// Some code... data () { return { test: "begin" }; }, // Some code... this.test = "end"; console.log(this.$refs.test.innerText);//"begin" this.nextTick(() => { console.log(this.$refs.test.innerText) //"end" })Vue.nextTick實現原理
Vue.nextTick的源碼vue項目/src/core/util/路徑下的next-tick.js文件,文章最后也會貼出完整的源碼
我們先來看看對于異步調用函數的實現方法:
let timerFunc if (typeof Promise !== "undefined" && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) if (isIOS) setTimeout(noop) } isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== "undefined" && ( isNative(MutationObserver) || MutationObserver.toString() === "[object MutationObserverConstructor]" )) { let counter = 1 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true } else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) { timerFunc = () => { setImmediate(flushCallbacks) } } else { timerFunc = () => { setTimeout(flushCallbacks, 0) } }
這段代碼首先的檢測運行環境的支持情況,使用不同的異步方法。優先級依次是Promise、MutationObserver、setImmediate和setTimeout。這是根據運行效率來做優先級處理,有興趣可以去了解一下這幾種方法的差異。總的來說,Event Loop分為宏任務以及微任務,宏任務耗費的時間是大于微任務的,所以優先使用微任務。例如Promise屬于微任務,而setTimeout就屬于宏任務。最終timerFunc則是我們調用nextTick函數時要內部會調用的主要方法,那么flushCallbacks又是什么呢,我們在看看flushCallbacks函數:
function flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } }
這個函數比較簡單,就是依次調用callbacks數組里面的方法。還使用slice()方法復制callbacks數組并把callbacks數組清空,這里的callbacks數組就是存放主線程執行過程中的Vue.nextTick()函數所傳的回調函數集合(主線程可能會多次使用Vue.nextTick()方法)。到這里就已經實現了根據環境選擇異步方法,并在異步方法中依次調用傳入Vue.nextTick()方法的回調函數。nextTick函數主要就是要將callback函數存在數組callbacks中,并調用timerFunc方法:
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) } }) if (!pending) { pending = true timerFunc() } // $flow-disable-line if (!cb && typeof Promise !== "undefined") { return new Promise(resolve => { _resolve = resolve }) } }
可以看到可以傳入第二個參數作為回調函數的this。另外如果參數一的條件判斷為false時則返回一個Promise對象。例如
Vue.nextTick(null, {value: "test"}) .then((data) => { console.log(data.value) // "test" })
這里還使用了一個優化技巧,用pending來標記異步任務是否被調用,也就是說在同一個tick內只調用一次timerFunc函數,這樣就不會開啟多個異步任務。
完整的源碼:
import { noop } from "shared/util" import { handleError } from "./error" import { isIE, isIOS, isNative } from "./env" export let isUsingMicroTask = false const callbacks = [] let pending = false function flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } } // Here we have async deferring wrappers using microtasks. // In 2.5 we used (macro) tasks (in combination with microtasks). // However, it has subtle problems when state is changed right before repaint // (e.g. #6813, out-in transitions). // Also, using (macro) tasks in event handler would cause some weird behaviors // that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109). // So we now use microtasks everywhere, again. // A major drawback of this tradeoff is that there are some scenarios // where microtasks have too high a priority and fire in between supposedly // sequential events (e.g. #4521, #6690, which have workarounds) // or even between bubbling of the same event (#6566). let timerFunc // The nextTick behavior leverages the microtask queue, which can be accessed // via either native Promise.then or MutationObserver. // MutationObserver has wider support, however it is seriously bugged in // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It // completely stops working after triggering a few times... so, if native // Promise is available, we will use it: /* istanbul ignore next, $flow-disable-line */ if (typeof Promise !== "undefined" && isNative(Promise)) { const p = Promise.resolve() timerFunc = () => { 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. if (isIOS) setTimeout(noop) } isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== "undefined" && ( isNative(MutationObserver) || // PhantomJS and iOS 7.x MutationObserver.toString() === "[object MutationObserverConstructor]" )) { // Use MutationObserver where native Promise is not available, // e.g. PhantomJS, iOS7, Android 4.4 // (#6466 MutationObserver is unreliable in IE11) let counter = 1 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true } else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) { // Fallback to setImmediate. // Techinically it leverages the (macro) task queue, // but it is still a better choice than setTimeout. timerFunc = () => { setImmediate(flushCallbacks) } } else { // Fallback to setTimeout. timerFunc = () => { setTimeout(flushCallbacks, 0) } } 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) } }) if (!pending) { pending = true timerFunc() } // $flow-disable-line if (!cb && typeof Promise !== "undefined") { return new Promise(resolve => { _resolve = resolve }) } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110256.html
摘要:因為平時使用都是傳回調的,所以很好奇什么情況下會為,去翻看官方文檔發現起新增如果沒有提供回調且在支持的環境中,則返回一個。這就對了,函數體內最后的判斷很明顯就是這個意思沒有回調支持。 Firstly, this paper is based on Vue 2.6.8剛開始接觸Vue的時候,哇nextTick好強,咋就在這里面寫就是dom更新之后,當時連什么macrotask、micro...
摘要:這是因為在運行時出錯,我們不這個錯誤的話,會導致整個程序崩潰掉。如果沒有向中傳入,并且瀏覽器支持的話,我們的返回的將是一個。如果不支持,就降低到用,整體邏輯就是這樣。。 我們知道vue中有一個api。Vue.nextTick( [callback, context] )他的作用是在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的 DOM。那么這個...
摘要:盡量把所有異步代碼放在一個宏微任務中,減少消耗加快異步代碼的執行。我們知道,如果一個異步代碼就注冊一個宏微任務的話,那么執行完全部異步代碼肯定慢很多避免頻繁地更新。中就算我們一次性修改多次數據,頁面還是只會更新一次。 寫文章不容易,點個贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內部詳情,讓我們一起學習吧研究基于 Vue版本 【2.5...
摘要:后來尤雨溪了解到是將回調放入的隊列。而且瀏覽器內部為了更快的響應用戶,內部可能是有多個的而的的優先級可能更高,因此對于尤雨溪采用的,甚至可能已經多次執行了的,都沒有執行的,也就導致了我們更新操 原發于我的博客。 前一篇文章已經詳細記述了Vue的核心執行過程。相當于已經搞定了主線劇情。后續的文章都會對其中沒有介紹的細節進行展開。 現在我們就來講講其他支線任務:nextTick和micro...
摘要:中引入了中的中引入了中的中,定義了的構造函數中的原型上掛載了方法,用來做初始化原型上掛載的屬性描述符,返回原型上掛載的屬性描述符返回原型上掛載與方法,用來為對象新增刪除響應式屬性原型上掛載方法原型上掛載事件相關的方法。 入口尋找 入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導出的vue。 ./r...
閱讀 1156·2021-11-24 09:38
閱讀 3603·2021-11-22 15:32
閱讀 3457·2019-08-30 15:54
閱讀 2567·2019-08-30 15:53
閱讀 1493·2019-08-30 15:52
閱讀 2495·2019-08-30 13:15
閱讀 1836·2019-08-29 12:21
閱讀 1395·2019-08-26 18:36