溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue中Watcher和Scheduler的實現原理是什么”，在日常操作中，相信很多人在Vue中Watcher和Scheduler的實現原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue中Watcher和Scheduler的實現原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
Vue通過數據偵測機制感知狀態的變化，上一篇《Vue如何實現數據偵測》有提到Watcher對象，當數據更新有更新，例如當執行this.title = '監聽我變化了沒'，在setter函數調用dep.notify通知watcher執行更新(具體執行watcher.update函數)。
那么Vue在何時創建Watcher，如何通過Scheduler來調度Watcher隊列，watcher的更新最終如何體現到視圖的渲染，本篇內容主要圍繞這三個問題來介紹Vue的Watcher實現原理。
組件從創建到銷毀會經歷一系列生命周期，其中我們比較熟悉的有beforeMount、mounted、beforeUpdate、updated, 了解了生命周期，理解Watcher在何時被創建就會容易很多。Vue共三處地方會創建Watcher對象，mount事件、$watch函數、computed和watch屬性, mount事件創建Watcher用于渲染通知，watch和computed創建的Watcher都用于監聽用戶自定義的屬性變化。
文件core/instance/lifecycle.js包含了Vue生命周期相關的函數，例如$forupdate、$destroy以及實例化Watcher的mountComponent函數，mountComponent函數在組件掛載完成執行$mount時觸發，函數首先觸發beforeMount鉤子事件，在實例化Watcher時有傳入before函數，before將觸發beforeUpdate hook。當組件有屬性更新時，watcher在更新(watcher.run)之前會觸發beforeUpdate事件。isRenderWatcher表明創建的是渲染Watcher，直接掛在vm._watcher屬性上，當強制執行$forceUpdate刷新渲染，會執行vm._watcher.update觸發渲染過程以及對應的update hook。
/**
* 生命周期mount事件觸發函數
* @param {*} vm
* @param {*} el
* @param {*} hydrating
* @returns
*/
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
callHook(vm, 'beforeMount')
let updateComponent = () => {
vm._update(vm._render(), hydrating)
}
// 實例化Watcher對象，在Watcher構造函數中建立Watcher和vm的關系
new Watcher(vm, updateComponent, noop, {
// 在執行wather.run函數之前觸發before hook事件
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
// isRenderWatcher表示用于渲染的Watcher，在執行$forceupdate時會手動觸發watcher.update
}, true /* isRenderWatcher */)
return vm
}
export default class Watcher {
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
this.getter = expOrFn
this.value = this.lazy
? undefined
: this.get()
}
}
Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}在組件中，除了使用watch、computed方法監聽屬性變化，Vue定義了$watch函數用于監聽屬性變化，例如當a.b.c嵌套屬性變化，可以$watch來實現監聽做后續處理，$watch相當于在組件中直接寫watch屬性的函數式寫法，可支持在運行時動態的添加依賴監聽，例如Vue源碼中的keep-alive組件在mounted事件中使用$watch監聽include、exclude屬性變化。
vm.$watch( expOrFn, callback, [options] )
參數：
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值：{Function} unwatch
// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點什么
})
// keep-alive.js文件
mounted () {
this.cacheVNode()
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
}$watch函數和mountComponent函數的區別是，mountComponent用于渲染監聽，會觸發相關的hook事件，而$watch的職責比較專一，就處理expOrFn的監聽。另外，$watch的cb參數可以是函數、對象或字符串，當為字符串時表示定義在Vue對象的函數名，例如在Vue組件中定義了nameChange函數，那么定義vm.$watch('name', 'nameChange')后，如果name有更新會觸發Vue實體的nameChange函數。
// 監聽屬性變化
Vue.prototype.$watch = function (
expOrFn: string | Function,
cb: any,
options?: Object
): Function {
const vm: Component = this
// cb可能是純JS對象，那么回調為cb.handler
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
const watcher = new Watcher(vm, expOrFn, cb, options)
// 返回watch注銷監聽函數
return function unwatchFn () {
watcher.teardown()
}
}
function createWatcher (
vm: Component,
expOrFn: string | Function,
handler: any,
options?: Object
) {
// 當執行函數是一個對象的時候， 將 handler 的 handler調用給執行函數
// 這里的 options 是 watch 函數的配置信息
if (isPlainObject(handler)) {
options = handler
handler = handler.handler
}
if (typeof handler === 'string') {
handler = vm[handler]
}
return vm.$watch(expOrFn, handler, options)
}使用Vue開發組件，這兩個屬性一定不陌生，例如使用watch定義firstName、secondName屬性的監聽，使用computed定義fullName屬性監聽，當firstName和secondName更新時fullName也隨之觸發更新。
new Vue({
el: '#app',
data() {
return {
firstName: 'Li',
secondName: 'Lei'
}
},
watch: {
secondName: function (newVal, oldVal) {
console.log('second name changed: ' + newVal)
}
},
computed: {
fullName: function() {
return this.firstName + this.secondName
}
},
mounted() {
this.firstName = 'Han'
this.secondName = 'MeiMei'
}
})當我們在watch和computed定義了對屬性的監聽，Vue在何時將其轉換為Watcher對象執行監聽？Vue的構造函數會調用_init(options)執行初始化，源碼core/components/instance/init.js文件定義了_init函數，執行了一些列初始化操作，例如初始化生命周期、事件、狀態等，其中initState函數就包含了watch和computed的初始化。
// core/components/instance/init.js
// Vue構造函數
function Vue (options) {
this._init(options)
}
// core/components/instance/init.js
Vue.prototype._init = function (options?: Object) {
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
}
// // core/components/state.js
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
...
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}initComputed初始化computed屬性，每一個Vue實體都包含_computedWatchers對象用于存儲所有computed屬性的watcher對象。首先遍歷computed對象，為每個key創建一個新的Watcher對象，其lazy屬性為true，表示Watcher會緩存計算值，如果依賴其依賴的屬性(如firstName、secondName)沒有更新，當前computed屬性(例如fullName)也不會觸發更新。computed中定義的屬性可以通過this(例如this.fullName)訪問，defineComputed將所有computed屬性掛載到Vue實體上。
// lazy為true表示需要緩存，一般只有computed屬性才會用到
const computedWatcherOptions = { lazy: true }
function initComputed (vm: Component, computed: Object) {
const watchers = vm._computedWatchers = Object.create(null)
for (const key in computed) {
const userDef = computed[key]
// 用戶定義的執行函數可能是{ get: function() {} }形式
const getter = typeof userDef === 'function' ? userDef : userDef.get
// 為用戶定義的每個computed屬性創建watcher對象
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
// 組件自身的computed屬性已經定義在組件原型鏈上，我們只需要定義實例化的computed屬性。
// 例如我們在computed定義了fullName，defineComputed會將其掛接到Vue對象的屬性上
if (!(key in vm)) {
defineComputed(vm, key, userDef)
}
}defineComputed函數將計算屬性轉換為{ get, set }形式，但計算屬性不需要set，所以代碼直接為其賦值了noop空函數。計算屬性的get函數通過createComputedGetter封裝，首先找到對應屬性的watcher對象，如果watcher的dirty為true，表示依賴屬性有更新，需要調用evaluate函數重新計算新值。
// 將computed定義的屬性轉換為{ get, set }形式并掛接到Vue實體上，這樣就可以通過this.fullName形式調用
export function defineComputed (
target: any,
key: string,
userDef: Object | Function
) {
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = createComputedGetter(key)
sharedPropertyDefinition.set = noop
} else {
sharedPropertyDefinition.get = userDef.get
? createComputedGetter
: noop
sharedPropertyDefinition.set = userDef.set || noop
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}
// 定義computed的專屬getter函數
function createComputedGetter (key) {
return function computedGetter () {
// _computedWatchers上為每個computed屬性定義了Watcher對象
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
// dirty為true，表示依賴的屬性有變化
if (watcher.dirty) {
// 重新計算值
watcher.evaluate()
}
if (Dep.target) {
// 將Dep.target(watcher)附加到當前watcher的依賴中
watcher.depend()
}
return watcher.value
}
}
}如果Dep.target有值，將其他依賴當前計算屬性的Watcher(例如使用到fullName的依賴Watcher)附加到當前計算屬性所依賴的屬性的dep集合中。如下面的代碼創建了對fullName計算屬性的監聽, 我們將其命名為watcher3。那么firstName和secondName的dep對象都會附加上watcher3觀察者，只要其屬性有任何變化，都會觸發watcher3的update函數，重新讀取fullName屬性值。
vm.$watch('fullName', function (newVal, oldVal) {
// 做點什么
})initWatch函數邏輯相對簡單些，遍歷每個屬性的依賴項，如果依賴項為數組，則遍歷數組，為每個依賴項單獨創建Watcher觀察者，createWatcher函數在前文中有提到，它使用$watch創建新的watcher實體。
// 初始化Watch屬性
function initWatch (vm: Component, watch: Object) {
for (const key in watch) {
const handler = watch[key]
// 如果對應屬性key有多個依賴項，則遍歷為每個依賴項創建watcher
if (Array.isArray(handler)) {
for (let i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i])
}
} else {
createWatcher(vm, key, handler)
}
}
}Vue在core/observer/scheduler.js文件定義了調度函數，一共有兩處使用，Watcher對象以及core/vdom/create-component.js文件。watcher對象在執行更新時，會被附加到調度隊列中等待執行。create-component.js主要處理渲染過程，使用scheduler的主要作用是觸發activated hook事件。這里重點闡述Watcher對Scheduler的使用。
當執行watcher的update函數，除了lazy(計算屬性watcher)、sync(同步watcher)，所有watcher都將調用queueWatcher函數附加到調度隊列中。
export default class Watcher {
/**
* 通知訂閱，如果依賴項有更新，該函數會被觸發
*/
update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}
}queueWatcher函數定義如下，函數的目的是將watcher附加到調度隊列中，對調度隊列創建微任務(microTask)，等待執行。關于microTask和macroTask的區別，看查看參考8“宏任務macroTask和微任務microTask的區別”。如果微任務flushSchedulerQueue還未執行(flushing為false)，直接將watcher附加到queue即可。否則，還需判斷當前微任務的執行進度，queue會按watcher的id做升序排序，保證先創建的watcher先執行。index為微任務中正在被執行的watcher索引，watcher將會插入到大于index且符合id升序排列的位置。最后隊列執行函數flushSchedulerQueue將通過nextTick創建一個微任務等待執行。
/*
* 附加watcher到隊列中，如果有重復的watcher直接跳過。
* 如果調度隊列正在執行(flushing為true)，將watcher放到合適的位置
*/
export function queueWatcher (watcher: Watcher) {
// 所有watcher都有一個遞增的唯一標識，
const id = watcher.id
// 如果watcher已經在隊列中，不做處理
if (has[id] == null) {
has[id] = true
if (!flushing) {
// 如果隊列還未執行，則直接附加到隊列尾部
queue.push(watcher)
} else {
// 如果正在執行，基于id將其附加到合適的位置。
// index為當前正在執行的watcher索引，并且index之前的watcher都被執行了。
// 先創建的watcher應該被先執行，和隊列中的watcher比較id大小，插入到合適的位置。
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
// i的位置，表明 watcher[i - 1].id < watcher[i].id < watcher[i + 1].id
queue.splice(i + 1, 0, watcher)
}
// 如果未排隊，開始排隊，nextick將執行調度隊列。
if (!waiting) {
waiting = true
nextTick(flushSchedulerQueue)
}
}
}nextTick將會選擇適合當前瀏覽器的微任務執行隊列，例如MutationObserver、Promise、setImmediate。flushSchedulerQueue函數將遍歷所有watcher并執行更新，首先需要將queue做升序排序，確保先創建的watcher先被執行，例如父組件的watcher優先于子組件執行。接著遍歷queue隊列，先觸發watcher的before函數，例如前文中介紹mountComponent函數在創建watcher時會傳入before事件，觸發callHook(vm, 'beforeUpdate')。接下來就具體執行更新(watcher.run)操作。當隊列執行完后，調用resetSchedulerState函數清空隊列、重置執行狀態。最后callActivatedHooks和callUpdatedHooks將觸發對應的activated、updated hook事件。
/**
* 遍歷執行所有的watchers
*/
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
flushing = true
let watcher, id
// 遍歷之前先排序隊列
// 排序的隊列能確保:
// 1.父組件先于子組件更新，因為父組件肯定先于子組件創建。
// 2.組件自定義的watcher將先于渲染watcher執行，因為自定義watcher先于渲染watcher創建。
// 3.如果組件在父組件執行wtcher期間destroyed了，它的watcher集合可以直接被跳過。
queue.sort((a, b) => a.id - b.id)
// 不要緩存length，因為在遍歷queue執行wacher的同時，queue隊列一直在調整。
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
// 通過before可觸發hook，例如執行beforeUpdated hook
watcher.before()
}
id = watcher.id
has[id] = null
// 執行watcher的更新
watcher.run()
}
// 由于activatedChildren和queue兩個隊列一直在更新，因為需要拷貝處理
const activatedQueue = activatedChildren.slice()
const updatedQueue = queue.slice()
// 重置掉隊隊列狀態
resetSchedulerState()
// 觸發activated和updated hooks
callActivatedHooks(activatedQueue)
callUpdatedHooks(updatedQueue)
}調度隊列會執行watcher的run函數觸發更新，每個watcher有active狀態，表明當前watcher是否處于激活狀態，當組件執行$destroy函數，會調用watcher的teardown函數將active設置為false。在執行更新通知回調cb之前，有三個條件判斷，首先判斷值是否相等，對于簡單值string或number類型的可直接判斷；如果value為對象或需要深度遍歷(deep為true)，例如用戶自定義了person屬性，其值為對象{ age: number, sex: number }，我們使用$watch('person', cb)監聽了person屬性，但當person.age發生變化時，cb不會被執行。如果改成$watch('person', cb, { deep: true })，任何嵌套的屬性發生變化，cb都會被觸發。滿足三個條件其中之一，cb回調函數將被觸發。
export default class Watcher {
/**
* 調度接口，將被調度器執行
*/
run () {
// 僅當watcher處于激活狀態，才會執行更新通知
// 當組件destroyed時，會調用watcher的teardown將其重置到非激活狀態
if (this.active) {
// 調用get獲取值
const value = this.get()
if (
// 如果新計算的值更新了
value !== this.value ||
// 如果value為對象或數組，不管value和this.value相等否，則其深度watchers也應該被觸發
// 因為其嵌套屬性可能發生變化了
isObject(value) ||
this.deep
) {
const oldValue = this.value
this.cb.call(this.vm, value, oldValue)
}
}
}
}
this.$watch('person', () => {
this.message = '年齡為:' + this.person.age
},
// 當deep為true，當age更新，回調會被觸發；如果deep為false,age更新不會觸發回調
{ deep: true }
)run函數有調用get獲取最新值，在get函數中，首先調用pushTarget函數將當前Watcher附加到全局Dep.target上，然后執行getter獲取最新值。在finally模塊中，如果deep為true，則調用traverse遞歸遍歷最新的value，value可能為Object或者Array，所以需要遍歷子屬性并觸發其getter函數，將其dep屬性附加上Dep.target(當前Watcher)，這樣任何子屬性的值發生變化都會通知到當前watcher，至于為什么，可以回顧下上篇《Vue如何實現數據狀態的偵測》。
export default class Watcher {
/**
* 執行getter，重新收集依賴項
*/
get () {
// 將當前Watcher附加到全局Dep.target上，并存儲targetStack堆棧中
pushTarget(this)
let value
const vm = this.vm
try {
// 執行getter讀取value
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// 如果deep為true，將遍歷+遞歸value對象
// 將所有嵌套屬性的dep都附加上當前watcher，所有子屬性對應的dep都會從push(Dep.target)
if (this.deep) {
// 遞歸遍歷所有嵌套屬性，并觸發其getter，將其對應的dep附加當前watcher
traverse(value)
}
// 退出堆棧
popTarget()
// 清理依賴
this.cleanupDeps()
}
return value
}
}在get函數中為什么要執行traverse遞歸遍歷子屬性，我們可以通過實際的例子來說明，例如在data中定義了{ person: { age: 18, sex: 0, addr: { city: '北京', detail: '五道口' } }, Vue會調用observe將person轉換為如下Observer對象，子屬性(如果為對象)也會轉換為Observer對象，簡單屬性都會定義get、set函數。
當watcher.get執行traverse函數時，會遞歸遍歷子屬性，當遍歷到addr屬性時，觸發get函數，該函數將調用其dep.depend將當前Watcher附加到依賴項中，這樣我們在執行執行this.person.age = 18，其set函數調用dep.notify觸發watcher的update函數，實現person對象的監聽。
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
...
}
return value
}
set: function reactiveSetter (newVal) {
...
dep.notify()
}到此，關于“Vue中Watcher和Scheduler的實現原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
