Vue源碼之依賴收集原理

這篇文章主要介紹了關於Vue源碼之依賴收集原理，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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

目標Vue版本：2.5.17-beta.0
vue原始碼註解：https://github.com/SHERlocked...
宣告：文章中原始碼的語法都使用Flow，且原始碼依需求有刪節(為了不被迷糊@_@)，如果要看完整版的請進入上面的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

#1 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 ######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#執行###watcher.run### 且執行相關鉤子函數######2.3 Dep######上面多次提到了一個關鍵字###Dep###，他是依賴收集的容器，或稱為###依賴蒐集器###，他記錄了哪些Watcher依賴自己的變化，或者說，哪些Watcher訂閱了自己的變化；這裡引用一個網友的發言：###<blockquote>@liuhongyi0101 ：简单点说就是引用计数 ，谁借了我的钱，我就把那个人记下来，以后我的钱少了 我就通知他们说我没钱了</blockquote><p>而把借钱的人记下来的小本本就是这里 <code>Dep</code> 实例里的subs</p><pre class="brush:php;toolbar:false">// 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 */</watcher>

这里 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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

jQuery源码之Callbacks的学习

浏览器与NodeJS的EventLoop异同以及部分机制

以上是Vue源碼之依賴收集原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！