Vue原始碼閱讀

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

目標Vue版本：2.5.17-beta.0

宣告：文章中原始碼的語法都使用 Flow，並且原始碼根據需要都有刪節(為了不被迷糊 @[email protected])，如果要看完整版的請進入上面的github地址，本文是系列文章，文章地址見底部~

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
  }
}

123456789101112

// src/core/instance/state.jsexport functioninitState(vm:Component){constopts=vm.$optionsif(opts.props)initProps(vm,opts.props)// 初始化propsif(opts.methods)initMethods(vm,opts.methods)// 初始化methodsif(opts.data)initData(vm)// 初始化dataif(opts.computed)initComputed(vm,opts.computed)// 初始化computedif(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做響應式處理
}
複製程式碼

12345678910

// src/core/instance/state.jsfunctioninitData(vm:Component){let data=vm.$options.datadata=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
}

12345678

// src/core/observer/index.jsexport functionobserve(value:any,asRootData:?boolean):Observer|void{let ob:Observer|voidob=newObserver(value)returnob}

這個方法主要用 data 作為引數去例項化一個 Observer 物件例項，Observer 是一個 Class，用於依賴收集和 notify 更新，Observer 的建構函式使用 defineReactive 方法給物件的鍵響應式化，給物件的屬性遞迴新增 getter/setter ，當data被取值的時候觸發 getter 並蒐集依賴，當被修改值的時候先觸發 getter 再觸發 setter 並派發更新

JavaScript

// 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()
    }
  })
}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

// src/core/observer/index.jsexportclassObserver{value:any;dep:Dep;constructor(value:any){value:any;this.dep=newDep()def(value,'__ob__',this)// def方法保證不可列舉this.walk(value)}// 遍歷物件的每一個屬性並將它們轉換為getter/setterwalk(obj:Object){constkeys=Object.keys(obj)for(leti=0;i<keys.length;i++){// 把所有可遍歷的物件響應式化defineReactive(obj,keys[i])}}}export functiondefineReactive(obj:Object,key:string,val:any,customSetter?:?Function,shallow?:boolean){constdep=newDep()// 在每個響應式鍵值的閉包中定義一個dep物件// 如果之前該物件已經預設了getter/setter則將其快取，新定義的getter/setter中會將其執行constgetter=property&&property.getconstsetter=property&&property.setlet childOb=!shallow&&observe(val)Object.defineProperty(obj,key,{enumerable:true,configurable:true,get:functionreactiveGetter(){constvalue=getter?getter.call(obj):val// 如果原本物件擁有getter方法則執行if(Dep.target){// 如果當前有watcher在讀取當前值dep.depend()// 那麼進行依賴收集，dep.addSub}returnvalue},set:functionreactiveSetter(newVal){constvalue=getter?getter.call(obj):val// 先getterif(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，他是依賴收集的容器，或者稱為依賴蒐集器，他記錄了哪些Watcher依賴自己的變化，或者說，哪些Watcher訂閱了自己的變化；這裡引用一個網友的發言：

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

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

JavaScript

// src/core/observer/dep.js

let uid = 0            // Dep例項的id，為了方便去重

export default class Dep {
  static target: ?Watcher           // 當前是誰在進行依賴的收集
  id: number
  subs: Array<Watcher>              // 觀察者集合
  
  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 */

123456789101112131415161718192021222324

// src/core/observer/dep.jslet uid=0// Dep例項的id，為了方便去重exportdefaultclassDep{static target:?Watcher// 當前是誰在進行依賴的收集id:numbersubs:Array<Watcher>// 觀察者集合constructor(){this.id=uid++// Dep例項的id，為了方便去重this.subs=[]// 儲存收集器中需要通知的Watcher}addSub(sub:Watcher){...}/* 新增一個觀察者物件 */removeSub(sub:Watcher){...}/* 移除一個觀察者物件 */depend(){...}/* 依賴收集，當存在Dep.target的時候把自己新增觀察者的依賴中 */notify(){...}/* 通知所有訂閱者 */}consttargetStack=[]// watcher棧export functionpushTarget(_target:?Watcher){...}/* 將watcher觀察者例項設定給Dep.target，用以依賴收集。同時將該例項存入target棧中 */export functionpopTarget(){...}/* 將觀察者例項從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() { ... }  /* 將自身從所有依賴收集訂閱列表刪除 */
}

12345678910111213141516171819202122232425262728293031323334353637383940

// src/core/observer/watcher.js/* 一個解析表示式，進行依賴收集的觀察者，同時在表示式資料變更時觸發回撥函式。它被用於$watch api以及指令 */exportdefaultclassWatcher{constructor(vm:Component,expOrFn:string|Function,cb:Function,options?:?Object,isRenderWatcher?:boolean// 是否是渲染watcher的標誌位){this.getter=expOrFn// 在get方法中執行if(this.computed){// 是否是計算屬性this.value=undefinedthis.dep=newDep()// 計算屬性建立過程中並未求值}else{// 不是計算屬性會立刻求值this.value=this.get()}}/* 獲得getter的值並且重新進行依賴收集 */get(){pushTarget(this)// 設定Dep.target = thislet valuevalue=this.getter.call(vm,vm)popTarget()// 將觀察者例項從target棧中取出並設定給Dep.targetthis.cleanupDeps()returnvalue}addDep(dep:Dep){...}/* 新增一個依賴關係到Deps集合中 */

1. 響應式系統

2. 程式碼實現

2.1 initState

2.2 Observer/defineReactive

2.3 Dep

2.4 Watcher

Vue原始碼閱讀--過濾器

vue 原始碼閱讀記錄

Vue原始碼閱讀- 批量非同步更新與nextTick原理

Vue原始碼閱讀

【一套程式碼小程式&Native&Web階段總結篇】可以這樣閱讀Vue原始碼

Mac下一款不錯的原始碼閱讀軟體

Memcache-Java-Client-Release原始碼閱讀（之七）

Memcache-Java-Client-Release原始碼閱讀（之六）

【筆記】ThreadPoolExecutor原始碼閱讀（三）

Java7、8中HashMap和ConcurrentHashMap原始碼閱讀

Promise原始碼閱讀之建構函式+then過程

vue-原始碼剖析-雙向繫結

JDK原始碼閱讀：InterruptibleChannel與可中斷IO，ig牛逼

zookeeper原始碼閱讀系列

vue原始碼探究---讀vue技術揭祕（1）

vue原始碼學習——觀察者模式

vue原始碼學習——資料雙向繫結的Object.defineProperty

Vue原始碼學習（二）——生命週期

## Zookeeper原始碼閱讀（六） Watcher

Vue 原始碼分析之proxy代理

Vue原始碼閱讀

1. 響應式系統

2. 程式碼實現

2.1 initState

2.2 Observer/defineReactive

2.3 Dep

2.4 Watcher

相關推薦