vue中的computed實現原理
阿新 • • 發佈:2019-02-03
vue中的computed的實現原理---------需要建立資料依賴蒐集,動態計算實現原理
1)問題:計算屬性如何與屬性建立依賴關係?屬性發生變化又如何通知到計算屬性重新計算?
如何建立依賴關係?----------利用 JavaScript 單執行緒原理和 Vue 的 Getter 設計,通過一個簡單的釋出訂閱,就可以在一次計算屬性求值的過程中收集到相關依賴
2)data 屬性初始化 getter setter:通過Object.defineProperty()給data設定setter getter
// src/observer/index.js // 這裡開始轉換 data 的 getter setter,原始值已存入到 __ob__ 屬性中 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val // 判斷是否處於依賴收集狀態 if (Dep.target) { // 建立依賴關係 dep.depend() ... } return value }, set: function reactiveSetter (newVal) { ... // 依賴發生變化,通知到計算屬性重新計算 dep.notify() } })
3)computed屬性初始化
// src/core/instance/state.js // 初始化計算屬性 function initComputed (vm: Component, computed: Object) { ... // 遍歷 computed 計算屬性 for (const key in computed) { ... // 建立 Watcher 例項 // create internal watcher for the computed property. watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions) // 建立屬性 vm.reversedMessage,並將提供的函式將用作屬性 vm.reversedMessage 的 getter, // 最終 computed 與 data 會一起混合到 vm 下,所以當 computed 與 data 存在重名屬性時會丟擲警告 defineComputed(vm, key, userDef) ... } } export function defineComputed (target: any, key: string, userDef: Object | Function) { ... // 建立 get set 方法 sharedPropertyDefinition.get = createComputedGetter(key) sharedPropertyDefinition.set = noop ... // 建立屬性 vm.reversedMessage,並初始化 getter setter Object.defineProperty(target, key, sharedPropertyDefinition) } function createComputedGetter (key) { return function computedGetter () { const watcher = this._computedWatchers && this._computedWatchers[key] if (watcher) { if (watcher.dirty) { // watcher 暴露 evaluate 方法用於取值操作 watcher.evaluate() } // 同第1步,判斷是否處於依賴收集狀態 if (Dep.target) { watcher.depend() } return watcher.value } } }
4)無論是屬性還是計算屬性,都會生成一個對應的 watcher 例項
// src/core/observer/watcher.js // 當通過 vm.reversedMessage 獲取計算屬性時,就會進到這個 getter 方法 get () { // this 指的是 watcher 例項 // 將當前 watcher 例項暫存到 Dep.target,這就表示開啟了依賴收集任務 pushTarget(this) let value const vm = this.vm try { // 在執行 vm.reversedMessage 的函調函式時,會觸發屬性(步驟1)和計算屬性(步驟2)的 getter // 在這個執行過程中,就可以收集到 vm.reversedMessage 的依賴了 value = this.getter.call(vm, vm) } catch (e) { if (this.user) { handleError(e, vm, `getter for watcher "${this.expression}"`) } else { throw e } } finally { if (this.deep) { traverse(value) } // 結束依賴收集任務 popTarget() this.cleanupDeps() } return value }
5)Dep 的程式碼短小精悍,但卻承擔著非常重要的依賴收集環節
// src/core/observer/dep.js
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
depend () {
if (Dep.target) {
Dep.target.addDep(this)
}
}
notify () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
// 更新 watcher 的值,與 watcher.evaluate() 類似,
// 但 update 是給依賴變化時使用的,包含對 watch 的處理
subs[i].update()
}
}
}
// 當首次計算 computed 屬性的值時,Dep 將會在計算期間對依賴進行收集
Dep.target = null
const targetStack = []
export function pushTarget (_target: Watcher) {
// 在一次依賴收集期間,如果有其他依賴收集任務開始(比如:當前 computed 計算屬性巢狀其他 computed 計算屬性),
// 那麼將會把當前 target 暫存到 targetStack,先進行其他 target 的依賴收集,
if (Dep.target) targetStack.push(Dep.target)
Dep.target = _target
}
export function popTarget () {
// 當巢狀的依賴收集任務完成後,將 target 恢復為上一層的 Watcher,並繼續做依賴收集
Dep.target = targetStack.pop()
}
總結一下依賴收集、動態計算的流程:
1. data 屬性初始化 getter setter
2. computed 計算屬性初始化,提供的函式將用作屬性 vm.reversedMessage 的 getter
3. 當首次獲取 reversedMessage 計算屬性的值時,Dep 開始依賴收集
4. 在執行 message getter 方法時,如果 Dep 處於依賴收集狀態,則判定 message 為 reversedMessage 的依賴,並建立依賴關係
5. 當 message 發生變化時,根據依賴關係,觸發 reverseMessage 的重新計算