Vue源碼閱讀 – 依賴收集原理

vue已是目前國內前端web端三分天下之一，同時也作為本人主要技術棧之一，在日常使用中知其然也好奇著所以然，另外最近的社區湧現了一大票vue源碼閱讀類的文章，在下借這個機會從大家的文章和討論中汲取了一些營養，同時對一些閱讀源碼時的想法進行總結，出產一些文章，作為自己思考的總結，本人水平有限，歡迎留言討論~

1. 響應式系統

通過官網的介紹我們知道 Vue.js 是一個MVVM框架，它並不關心視圖變化，而通過數據驅動視圖更新，這讓我們的狀態管理非常簡單，而這是怎麼實現的呢。盜用官網一張圖

每個組件實例都有相應的 Watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

這裡有三個重要的概念 Observe 、 Dep 、 Watcher ，分別位於 src/core/observer/index.js、 src/core/observer/dep.js 、 src/core/observer/watcher.js

• Observe 類主要給響應式對象的屬性添加 getter/setter 用於依賴收集與派發更新
• Dep 類用於收集當前響應式對象的依賴關係
• Watcher 類是觀察者，實例分為渲染 watcher、計算屬性 watcher、偵聽器 watcher三種

2. 代碼實現

2.1 initState

響應式化的入口位於 src/core/instance/init.js 的 initState 中：

// src/core/instance/state.js
 
export function initState(vm: Component) {
 const opts = vm.$options
 if (opts.props) initProps(vm, opts.props) // 初始化props
 if (opts.methods) initMethods(vm, opts.methods) // 初始化methods
 if (opts.data) initData(vm) // 初始化data
 if (opts.computed) initComputed(vm, opts.computed) // 初始化computed 

 if (opts.watch) initWatch(vm, opts.watch) // 初始化watch
 }
}
 

它非常規律的定義了幾個方法來初始化 props 、 methods 、 data 、 computed 、 wathcer，這裡看一下 initData 方法，來窺一豹

// src/core/instance/state.js
 
function initData(vm: Component) {
 let data = vm.$options.data
 data = vm._data = typeof data === 'function'
 ? getData(data, vm)
 : data || {}
 observe(data, true /* asRootData */) // 給data做響應式處理
}

首先判斷了下 data 是不是函數，是則取返回值不是則取自身，之後有一個 observe 方法對 data 進行處理，這個方法嘗試給創建一個Observer實例 __ob__ ，如果成功創建則返回新的Observer實例，如果已有Observer實例則返回現有的Observer實例

2.2 Observer/defineReactive

// src/core/observer/index.js
 
export function observe (value: any, asRootData: ?boolean): Observer | void {
 let ob: Observer | void
 ob = new Observer(value)
 return ob
}
 

這個方法主要用 data 作為參數去實例化一個 Observer 對象實例，Observer 是一個 Class，用於依賴收集和 notify 更新，Observer 的構造函數使用 defineReactive 方法給對象的鍵響應式化，給對象的屬性遞歸添加 getter/setter ，當data被取值的時候觸發 getter 並蒐集依賴，當被修改值的時候先觸發 getter 再觸發 setter 並派發更新

// src/core/observer/index.js
 
export class Observer {
 value: any;
 dep: Dep;
 
 constructor (value: any) {
 value: any;
 this.dep = new Dep()
 def(value, '__ob__', this) // def方法保證不可枚舉
 this.walk(value)
 }
 
 // 遍歷對象的每一個屬性並將它們轉換為getter/setter
 walk (obj: Object) {
 const keys = Object.keys(obj)
 for (let i = 0; i < keys.length; i++) { // 把所有可遍歷的對象響應式化
 defineReactive(obj, keys[i])
 }
 }
}
 
export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean) {
 const dep = new Dep() // 在每個響應式鍵值的閉包中定義一個dep對象
 
 // 如果之前該對象已經預設了getter/setter則將其緩存，新定義的getter/setter中會將其執行
 const getter = property && property.get
 const setter = property && property.set
 
 let childOb = !shallow && observe(val)
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
 const value = getter ? getter.call(obj) : val // 如果原本對象擁有getter方法則執行
 if (Dep.target) { // 如果當前有watcher在讀取當前值
 dep.depend() // 那麼進行依賴收集，dep.addSub
 } 

 return value
 },
 set: function reactiveSetter (newVal) {
 const value = getter ? getter.call(obj) : val // 先getter
 if (newVal === value || (newVal !== newVal && value !== value)) { // 如果跟原來值一樣則不管
 return
 }
 if (setter) { setter.call(obj, newVal) } // 如果原本對象擁有setter方法則執行
 else { val = newVal }
 dep.notify() // 如果發生變更，則通知更新，調用watcher.update()
 }
 })
}

getter 的時候進行依賴的收集，注意這裡，只有在 Dep.target 中有值的時候才會進行依賴收集，這個 Dep.target 是在Watcher實例的 get 方法調用的時候 pushTarget 會把當前取值的watcher推入 Dep.target ，原先的watcher壓棧到 targetStack 棧中，當前取值的watcher取值結束後出棧並把原先的watcher值賦給 Dep.target ， cleanupDeps 最後把新的 newDeps 裡已經沒有的watcher清空，以防止視圖上已經不需要的無用watcher觸發

setter 的時候首先 getter ，並且比對舊值沒有變化則return，如果發生變更，則dep通知所有subs中存放的依賴本數據的Watcher實例 update 進行更新，這裡 update 中會 queueWatcher( ) 異步推送到調度者觀察者隊列 queue 中，在nextTick時 flushSchedulerQueue( ) 把隊列中的watcher取出來執行 watcher.run 且執行相關鉤子函數

2.3 Dep

上面多次提到了一個關鍵詞 Dep ，他是依賴收集的容器，或者稱為

@liuhongyi0101 ：簡單點說就是引用計數 ，誰借了我的錢，我就把那個人記下來，以後我的錢少了 我就通知他們說我沒錢了

而把借錢的人記下來的小本本就是這裡 Dep 實例裡的subs

// src/core/observer/dep.js
 
let uid = 0 // Dep實例的id，為了方便去重
 
export default class Dep {
 static target: ?Watcher // 當前是誰在進行依賴的收集
 id: number
 subs: Array // 觀察者集合
 
 constructor() {
 this.id = uid++ // Dep實例的id，為了方便去重
 this.subs = [] // 存儲收集器中需要通知的Watcher
 }
 
 addSub(sub: Watcher) { ... } /* 添加一個觀察者對象 */
 removeSub(sub: Watcher) { ... } /* 移除一個觀察者對象 */
 depend() { ... } /* 依賴收集，當存在Dep.target的時候把自己添加觀察者的依賴中 */
 notify() { ... } /* 通知所有訂閱者 */
}
 
const targetStack = [] // watcher棧 

 
export function pushTarget(_target: ?Watcher) { ... } /* 將watcher觀察者實例設置給Dep.target，用以依賴收集。同時將該實例存入target棧中 */
export function popTarget() { ... } /* 將觀察者實例從target棧中取出並設置給Dep.target */

這裡 Dep 的實例中的 subs 蒐集的依賴就是 watcher 了，它是 Watcher 的實例，將來用來通知更新

2.4 Watcher

// src/core/observer/watcher.js
 
/* 一個解析表達式，進行依賴收集的觀察者，同時在表達式數據變更時觸發回調函數。它被用於$watch api以及指令 */
export default class Watcher {
 constructor(
 vm: Component,
 expOrFn: string | Function,
 cb: Function,
 options?: ?Object,
 isRenderWatcher?: boolean // 是否是渲染watcher的標誌位
 ) {
 this.getter = expOrFn // 在get方法中執行
 if (this.computed) { // 是否是 計算屬性
 this.value = undefined
 this.dep = new Dep() // 計算屬性創建過程中並未求值
 } else { // 不是計算屬性會立刻求值
 this.value = this.get()
 }
 }
 
 /* 獲得getter的值並且重新進行依賴收集 */ 

 get() {
 pushTarget(this) // 設置Dep.target = this
 let value
 value = this.getter.call(vm, vm)
 popTarget() // 將觀察者實例從target棧中取出並設置給Dep.target
 this.cleanupDeps()
 return value
 }
 
 addDep(dep: Dep) { ... } /* 添加一個依賴關係到Deps集合中 */
 cleanupDeps() { ... } /* 清理newDeps裡沒有的無用watcher依賴 */
 update() { ... } /* 調度者接口，當依賴發生改變的時候進行回調 */
 run() { ... } /* 調度者工作接口，將被調度者回調 */
 getAndInvoke(cb: Function) { ... }
 evaluate() { ... } /* 收集該watcher的所有deps依賴 */
 depend() { ... } /* 收集該watcher的所有deps依賴，只有計算屬性使用 */
 teardown() { ... } /* 將自身從所有依賴收集訂閱列表刪除 */
}
 

get 方法中執行的 getter 就是在一開始new渲染watcher時傳入的 updateComponent = () => { vm._update(vm._render(), hydrating) } ，這個方法首先 vm._render() 生成渲染VNode樹，在這個過程中完成對當前Vue實例 vm 上的數據訪問，觸發相應一眾響應式對象的 getter ，然後 vm._update() 去 patch

注意這裡的 get 方法最後執行了 getAndInvoke ，這個方法首先遍歷watcher中存的 deps ，移除 newDep 中已經沒有的訂閱，然後 depIds = newDepIds; deps = newDeps ，把 newDepIds 和 newDeps 清空。每次添加完新的訂閱後移除舊的已經不需要的訂閱，這樣在某些情況，比如 v-if 已不需要的模板依賴的數據發生變化時就不會通知watcher去 update 了

2.5 小結

整個收集的流程大約是這樣的，可以對照著上面的流程看一下

watcher 有下面幾種使用場景：

• render watcher 渲染 watcher，渲染視圖用的 watcher
• computed watcher 計算屬性 watcher，因為計算屬性即依賴別人也被人依賴，因此也會持有一個 Dep 實例
• watch watcher 偵聽器 watcher

只要會被別的觀察者 ( watchers ) 依賴，比如data、data的屬性、計算屬性、props，就會在閉包裡生成一個 Dep 的實例 dep 並在被調用 getter 的時候 dep.depend 收集它被誰依賴了，並把被依賴的watcher存放到自己的subs中 this.subs.push(sub) ，以便在自身改變的時候通知 notify 存放在 dep.subs 數組中依賴自己的 watchers 自己改變了，請及時 update ~

只要依賴別的響應式化對象的對象，都會生成一個觀察者 watcher ，用來統計這個 watcher依賴了哪些響應式對象，在這個 watcher 求值前把當前 watcher 設置到全局 Dep.target ，並在自己依賴的響應式對象發生改變的時候及時 update

後臺私信發送關鍵字：“前 端”有驚喜

閱讀更多 前端嫣然呀呀呀 的文章

關鍵字: 讀書 一些 源碼