問題：
1.能簡單說一下vue 的異步更新機制嗎乏梁？
2.nextTick的原理是什么次洼？
-
dep.notify
- 源碼地址：/src/core/observer/dep.js
/*
*通知dep中所有的watcher，執(zhí)行watcher.updata()方法
*/
notify () {
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
subs.sort((a, b) => a.id - b.id)
}
//遍歷dep中的存儲就的watcher遇骑，執(zhí)行watcher.updata()
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
-
watcher.update
- 源碼地址：/src/core/observer/watcher.js
/**
* 根據(jù)watcher配置項卖毁，決定接下來怎么走，一般是queryWatcher
*
*/
update () {
/* istanbul ignore else */
if (this.lazy) {
// 懶執(zhí)行時走這里落萎，比如computed
// 將dirty職位true亥啦，可以讓computedGetter執(zhí)行重新計算computed回調(diào)函數(shù)的執(zhí)行結(jié)果
this.dirty = true
} else if (this.sync) {
// 同步執(zhí)行，使用vm.watch選項是可以傳遞一個sync選項练链，
// 當(dāng)為true時翔脱，并且數(shù)據(jù)更新時watcher就不走異步隊列，直接執(zhí)行this.run
this.run()
} else {
// 更新時一般都走這里媒鼓，將watcher放入隊列watcher中
queueWatcher(this)
}
}
-
queueWatcher
- 源碼地址：/src/core/observer/scheduler.js
/**
* 將watcher放入届吁，watcher隊列中
*/
export function queueWatcher (watcher: Watcher) {
//給每個watcher添加id
const id = watcher.id
//判重watcher不會重復(fù)入隊
if (has[id] == null) {
// 緩存一下watcher，用于判斷watcher是否已入隊
has[id] = true
if (!flushing) {
// 如果flushing=false绿鸣，表示當(dāng)前watcher沒有被刷新疚沐，watcher可以直接入隊
queue.push(watcher)
} else {
// watcher隊列已經(jīng)被刷新，這個時候watcher入隊就需要特殊操作
// 保證watcher入隊以后潮模，刷新的watcher隊列為有序的
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
// waiting為false時亮蛔，表示當(dāng)前瀏覽器的異步隊列任務(wù)不支持flushSchedulerQueue函數(shù)
waiting = true
if (process.env.NODE_ENV !== 'production' && !config.async) {
// 同步執(zhí)行，直接刷新watcher隊列
// 性能會大打折扣
flushSchedulerQueue()
return
}
nextTick(flushSchedulerQueue)
}
}
}
-
nextTick
- 源碼地址：/src/core/util/next-tick.js
/**
* 完成兩件事：
* 1擎厢、用 try catch 包裝 flushSchedulerQueue 函數(shù)究流，然后將其放入 callbacks 數(shù)組
* 2辣吃、如果 pending 為 false，表示現(xiàn)在瀏覽器的任務(wù)隊列中沒有 flushCallbacks 函數(shù)
* 如果 pending 為 true芬探，則表示瀏覽器的任務(wù)隊列中已經(jīng)被放入了 flushCallbacks 函數(shù)齿尽，
* 待執(zhí)行 flushCallbacks 函數(shù)時，pending 會被再次置為 false灯节，表示下一個 flushCallbacks 函數(shù)可以進入
* 瀏覽器的任務(wù)隊列了
* pending 的作用：保證在同一時刻循头，瀏覽器的任務(wù)隊列中只有一個 flushCallbacks 函數(shù)
* @param {*} cb 接收一個回調(diào)函數(shù) => flushSchedulerQueue
* @param {*} ctx 上下文
* @returns
*/
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
// 用 callbacks 數(shù)組存儲經(jīng)過包裝的 cb 函數(shù)
callbacks.push(() => {
if (cb) {
// 用 try catch 包裝回調(diào)函數(shù)，便于錯誤捕獲
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
// 執(zhí)行 timerFunc炎疆，在瀏覽器的任務(wù)隊列中（首選微任務(wù)隊列）放入 flushCallbacks 函數(shù)
timerFunc()
}
// $flow-disable-line
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}
-
flushCallbacks
- 源碼地址：/src/core/util/next-tick.js
/**
* 做了三件事：
* 1.將pending設(shè)置為false
* 2.清空callbacks數(shù)組
* 3.執(zhí)行 callbacks 數(shù)組中的每一個函數(shù)（比如 flushSchedulerQueue卡骂、用戶調(diào)用 nextTick 傳遞的回調(diào)函數(shù)）
*/
const callbacks = []
let pending = false
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
// 遍歷 callbacks 數(shù)組，執(zhí)行其中存儲的每個 flushSchedulerQueue 函數(shù)/
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
-
flushSchedulerQueue
- 源碼地址：/src/core/observer/scheduler.js
/**
* Flush both queues and run the watchers.
* 刷新隊列形入，由 flushCallbacks 函數(shù)負責(zé)調(diào)用全跨，主要做了如下兩件事：
* 1、更新 flushing 為 ture亿遂，表示正在刷新隊列浓若，在此期間往隊列中 push 新的 watcher 時需要特殊處理（將其放在隊列的合適位置）
* 2、按照隊列中的 watcher.id 從小到大排序蛇数，保證先創(chuàng)建的 watcher 先執(zhí)行挪钓，也配合 第一步
* 3、遍歷 watcher 隊列耳舅，依次執(zhí)行 watcher.before碌上、watcher.run，并清除緩存的 watcher
*/
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
// 標(biāo)志現(xiàn)在正在刷新隊列
flushing = true
let watcher, id
/**
* 刷新隊列之前先給隊列排序（升序）浦徊，可以保證：
* 1馏予、組件的更新順序為從父級到子級，因為父組件總是在子組件之前被創(chuàng)建
* 2盔性、一個組件的用戶 watcher 在其渲染 watcher 之前被執(zhí)行霞丧，因為用戶 watcher 先于 渲染 watcher 創(chuàng)建
* 3、如果一個組件在其父組件的 watcher 執(zhí)行期間被銷毀冕香，則它的 watcher 可以被跳過
* 排序以后在刷新隊列期間新進來的 watcher 也會按順序放入隊列的合適位置
*/
queue.sort((a, b) => a.id - b.id)
// 這里直接使用了 queue.length蛹尝，動態(tài)計算隊列的長度，沒有緩存長度暂筝，是因為在執(zhí)行現(xiàn)有 watcher 期間隊列中可能會被 push 進新的 watcher
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
// 執(zhí)行 before 鉤子箩言，在使用 vm.$watch 或者 watch 選項時可以通過配置項（options.before）傳遞
if (watcher.before) {
watcher.before()
}
// 將緩存的 watcher 清除
id = watcher.id
has[id] = null
// 執(zhí)行 watcher.run，最終觸發(fā)更新函數(shù)焕襟，比如 updateComponent 或者 獲取 this.xx（xx 為用戶 watch 的第二個參數(shù)），當(dāng)然第二個參數(shù)也有可能是一個函數(shù)饭豹，那就直接執(zhí)行
watcher.run()
}
// keep copies of post queues before resetting state
const activatedQueue = activatedChildren.slice()
const updatedQueue = queue.slice()
/**
* 重置調(diào)度狀態(tài)：
* 1鸵赖、重置 has 緩存對象务漩，has = {}
* 2、waiting = flushing = false它褪，表示刷新隊列結(jié)束
* waiting = flushing = false饵骨，表示可以像 callbacks 數(shù)組中放入新的 flushSchedulerQueue 函數(shù)，并且可以向瀏覽器的任務(wù)隊列放入下一個 flushCallbacks 函數(shù)了
*/
resetSchedulerState()
// call component updated and activated hooks
callActivatedHooks(activatedQueue)
callUpdatedHooks(updatedQueue)
// devtool hook
/* istanbul ignore if */
if (devtools && config.devtools) {
devtools.emit('flush')
}
}
/**
* Reset the scheduler's state.
*/
function resetSchedulerState () {
index = queue.length = activatedChildren.length = 0
has = {}
if (process.env.NODE_ENV !== 'production') {
circular = {}
}
waiting = flushing = false
}
-
watcher.run
- 源碼地址：/src/core/observer/watcher.js
/**
* 由 刷新隊列函數(shù) flushSchedulerQueue 調(diào)用茫打，如果是同步 watch居触，則由 this.update 直接調(diào)用，完成如下幾件事：
* 1老赤、執(zhí)行實例化 watcher 傳遞的第二個參數(shù)轮洋，updateComponent 或者 獲取 this.xx 的一個函數(shù)(parsePath 返回的函數(shù))
* 2、更新舊值為新值
* 3抬旺、執(zhí)行實例化 watcher 時傳遞的第三個參數(shù)弊予，比如用戶 watcher 的回調(diào)函數(shù)
*/
run () {
if (this.active) {
// 調(diào)用 this.get 方法
const value = this.get()
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
isObject(value) ||
this.deep
) {
// 更新舊值為新值
const oldValue = this.value
this.value = value
if (this.user) {
// 如果是用戶 watcher，則執(zhí)行用戶傳遞的第三個參數(shù) —— 回調(diào)函數(shù)开财，參數(shù)為 val 和 oldVal
try {
this.cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}"`)
}
} else {
// 渲染 watcher汉柒，this.cb = noop，一個空函數(shù)
this.cb.call(this.vm, value, oldValue)
}
}
}
}
-
watcher.get
- 源碼地址：/src/core/observer/watcher.js
/**
* 執(zhí)行 this.getter责鳍，并重新收集依賴
* this.getter 是實例化 watcher 時傳遞的第二個參數(shù)碾褂，一個函數(shù)或者字符串，比如：updateComponent 或者 parsePath 返回的函數(shù)
* 為什么要重新收集依賴历葛？
* 因為觸發(fā)更新說明有響應(yīng)式數(shù)據(jù)被更新了斋扰，但是被更新的數(shù)據(jù)雖然已經(jīng)經(jīng)過 observe 觀察了，但是卻沒有進行依賴收集啃洋，
* 所以传货，在更新頁面時，會重新執(zhí)行一次 render 函數(shù)宏娄，執(zhí)行期間會觸發(fā)讀取操作问裕，這時候進行依賴收集
*/
get () {
// 打開 Dep.target，Dep.target = this
pushTarget(this)
// value 為回調(diào)函數(shù)執(zhí)行的結(jié)果
let value
const vm = this.vm
try {
// 執(zhí)行回調(diào)函數(shù)孵坚，比如 updateComponent粮宛，進入 patch 階段
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
if (this.deep) {
traverse(value)
}
// 關(guān)閉 Dep.target，Dep.target = null
popTarget()
this.cleanupDeps()
}
return value
}
總結(jié)：
Vue的一部更新機制如何實現(xiàn)的卖宠？
- vue的異步更新機制是利用瀏覽器的異步任務(wù)隊列實現(xiàn)的（首選事微任務(wù)其次事宏任務(wù)）巍杈。
當(dāng)響應(yīng)式數(shù)據(jù)更新時會調(diào)用dep.notify，通知dep中收集的watcher去執(zhí)行update方法扛伍，watcher.update將watcher放入一個watcher隊列中筷畦。
Vue 的 nextTick API 是如何實現(xiàn)的？
- vue中的nextTick方法其實做了兩件事：
1.遞歸回調(diào)函數(shù)用try catch 包裹然后放入到callbacks數(shù)組中。
2.執(zhí)行timerFun方法鳖宾，在瀏覽器的異步執(zhí)行隊列中加入刷新的callbacks函數(shù)吼砂。
