首頁 > 文章 > web前端 > Vue源碼之依賴收集原理

Vue源碼之依賴收集原理

不言原創: 2018-07-09 11:14:451370瀏覽

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

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

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

1. 響應式系統

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

Vue源碼之依賴收集原理

每個元件實例都有對應的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 小结

整个收集的流程大约是这样的，可以对照着上面的流程看一下

Vue源碼之依賴收集原理

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中文网！

Vue源碼之依賴收集原理

1. 響應式系統

data

2.4 Watcher

2.5 小结

相關文章