寫在前面
前段時間在寫專案時對nextTick的使用有一些疑惑。在查閱各種資料之後，在這裡總結一下Vue.js非同步更新的策略以及nextTick的用途和原理。如有總結錯誤的地方，歡迎指出！
本文將從以下3點進行總結：
- 為什麼Vue.js要非同步更新檢視？
- JavaScript非同步執行的機制是怎樣的？
- 什麼情況下要使用nextTick？
先看一個例子
<template>
<div>
<div ref="message">{{message}}</div>
<button @click="handleClick">點選</button>
</div>
</template>
複製程式碼 export default {
data () {
return {
message: 'begin'
};
},
methods () {
handleClick () {
this.message = 'end';
console.log(this.$refs.message.innerText); //列印“begin”
}
}
}
複製程式碼列印出來的結果是“begin”，我們在點選事件裡明明將message賦值為“end”，而獲取真實DOM節點的innerHTML卻沒有得到預期中的“begin”，為什麼？
再看一個例子
<template>
<div>
<div>{{number}}</div>
<div @click="handleClick">click</div>
</div>
</template>
複製程式碼 export default {
data () {
return {
number: 0
};
},
methods: {
handleClick () {
for(let i = 0; i < 10000; i++) {
this.number++;
}
}
}
}
複製程式碼在點選click事件之後，number會被遍歷增加10000次。在Vue.js響應式系統中，可以看一下我的前一篇文章Vue.js的響應式系統原理。我們知道Vue.js會經歷“setter->Dep->Watcher->patch->檢視”這幾個流程。。
根據以往的理解，每次number被+1的時候，都會觸發number的setter按照上邊的流程最後來修改真實的DOM,然後DOM被更新了10000次，想想都刺激！看一下官網的描述：Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常重要顯然。
JavaScript的執行機制
為了方便理解Vue.js非同步更新策略和nextTick,先介紹以下JS的執行機制，參考阮一峰老師的JavaScript 執行機制詳解：再談Event Loop。摘取的關鍵部分如下：JS是單執行緒的，意思就是同一時間只能做一件事情。它是基於事件輪詢的，具體可以分為以下幾個步驟：
（1）所有同步任務都在主執行緒上執行，形成一個執行棧（execution context stack）。
（2）主執行緒之外，還存在一個"任務佇列"（task queue）。只要非同步任務有了執行結果，就在"任務佇列"之中放置一個事件。
（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務佇列"，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。
（4）主執行緒不斷重複上面的第三步。
事件輪詢
Vue.js在修改資料的時候，不會立馬修改資料，而是要等同一事件輪詢的資料都更新完之後，再統一進行檢視更新。 知乎上的例子：
//改變資料
vm.message = 'changed'
//想要立即使用更新後的DOM。這樣不行，因為設定message後DOM還沒有更新
console.log(vm.$el.textContent) // 並不會得到'changed'
//這樣可以，nextTick裡面的程式碼會在DOM更新後執行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})
複製程式碼圖解：
模擬nextTick
nextTick在官網當中的定義：
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。
以下用setTimeout來模擬nextTick，先定義一個callbacks來儲存nextTick，在下一個tick處理回撥函式之前，所有的cb都會儲存到這個callbacks陣列當中。pending是一個標記位，代表等待的狀態。接著setTimeout 會在 task 中建立一個事件 flushCallbacks ，flushCallbacks 則會在執行時將 callbacks 中的所有 cb 依次執行。
// 儲存nextTick
let callbacks = [];
let pending = false;
function nextTick (cb) {
callbacks.push(cb);
if (!pending) {
// 代表等待狀態的標誌位
pending = true;
setTimeout(flushCallbacks, 0);
}
}
function flushCallbacks () {
pending = false;
const copies = callbacks.slice(0);
callbacks.length = 0;
for (let i = 0; i < copies.length; i++) {
copies[i]();
}
}
複製程式碼真實的程式碼比這兒複雜的多，在Vue.js原始碼當中，nextTick定義在一個單獨的檔案中來維護，在src/core/util/next-tick.js中：
/* @flow */
/* globals MessageChannel */
import { noop } from 'shared/util'
import { handleError } from './error'
import { isIOS, isNative } from './env'
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 both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).
let microTimerFunc
let macroTimerFunc
let useMacroTask = false
// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
macroTimerFunc = () => {
setImmediate(flushCallbacks)
}
} 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)
}
} else {
/* istanbul ignore next */
macroTimerFunc = () => {
setTimeout(flushCallbacks, 0)
}
}
// Determine microtask defer implementation.
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(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.
if (isIOS) setTimeout(noop)
}
} else {
// fallback to macro
microTimerFunc = macroTimerFunc
}
/**
* Wrap a function so that if any code inside triggers state change,
* the changes are queued using a (macro) task instead of a microtask.
*/
export function withMacroTask (fn: Function): Function {
return fn._withTask || (fn._withTask = function () {
useMacroTask = true
const res = fn.apply(null, arguments)
useMacroTask = false
return res
})
}
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
if (useMacroTask) {
macroTimerFunc()
} else {
microTimerFunc()
}
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}
複製程式碼加上註釋之後：
/**
* Defer a task to execute it asynchronously.
*/
/*
延遲一個任務使其非同步執行，在下一個tick時執行，一個立即執行函式，返回一個function
這個函式的作用是在task或者microtask中推入一個timerFunc，在當前呼叫棧執行完以後以此執行直到執行到timerFunc
目的是延遲到當前呼叫棧執行完以後執行
*/
export const nextTick = (function () {
/*存放非同步執行的回撥*/
const callbacks = []
/*一個標記位，如果已經有timerFunc被推送到任務佇列中去則不需要重複推送*/
let pending = false
/*一個函式指標，指向函式將被推送到任務佇列中，等到主執行緒任務執行完時，任務佇列中的timerFunc被呼叫*/
let timerFunc
/*下一個tick時的回撥*/
function nextTickHandler () {
/*一個標記位，標記等待狀態（即函式已經被推入任務佇列或者主執行緒，已經在等待當前棧執行完畢去執行），這樣就不需要在push多個回撥到callbacks時將timerFunc多次推入任務佇列或者主執行緒*/
pending = false
/*執行所有callback*/
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// 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 if */
/*
這裡解釋一下，一共有Promise、MutationObserver以及setTimeout三種嘗試得到timerFunc的方法
優先使用Promise，在Promise不存在的情況下使用MutationObserver，這兩個方法都會在microtask中執行，會比setTimeout更早執行，所以優先使用。
如果上述兩種方法都不支援的環境則會使用setTimeout，在task尾部推入這個函式，等待呼叫執行。
參考：https://www.zhihu.com/question/55364497
*/
if (typeof Promise !== 'undefined' && isNative(Promise)) {
/*使用Promise*/
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
// 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)
}
} else if (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 IE11, iOS7, Android 4.4
/*新建一個textNode的DOM物件，用MutationObserver繫結該DOM並指定回撥函式，在DOM變化的時候則會觸發回撥,該回撥會進入主執行緒（比任務佇列優先執行），即textNode.data = String(counter)時便會觸發回撥*/
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/* istanbul ignore next */
/*使用setTimeout將回撥推入任務佇列尾部*/
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}
/*
推送到佇列中下一個tick時執行
cb 回撥函式
ctx 上下文
*/
return function queueNextTick (cb?: Function, ctx?: Object) {
let _resolve
/*cb存到callbacks中*/
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}
})()
複製程式碼關鍵在於timeFunc()，該函式起到延遲執行的作用。 從上面的介紹，可以得知timeFunc()一共有三種實現方式。
- Promise
- MutationObserver
- setTimeout
用途
nextTick的用途
應用場景：需要在檢視更新之後，基於新的檢視進行操作。
看一個例子： 點選show按鈕使得原來v-show：false的input輸入框顯示，並獲取焦點：
<div id="app">
<input ref="input" v-show="inputShow">
<button @click="show">show</button>
</div>
複製程式碼new Vue({
el: "#app",
data() {
return {
inputShow: false
}
},
methods: {
show() {
this.inputShow = true
this.$nextTick(() => {
this.$refs.input.focus()
})
}
}
})
複製程式碼