Vue源碼學習: 關於對Array的數據偵聽

時間 2019-12-08

標籤 vue 源碼學習關於 array 數據偵聽简体版

原文原文鏈接

摘要

咱們都知道Vue的響應式是經過Object.defineProperty來進行數據劫持。可是那是針對Object類型能夠實現, 若是是數組呢? 經過set/get方式是不行的。html

可是Vue做者使用了一個方式來實現Array類型的監測: 攔截器。vue

核心思想

經過建立一個攔截器來覆蓋數組自己的原型對象Array.prototype。react

攔截器

經過查看Vue源碼路徑vue/src/core/observer/array.js。數組

/**
 * Vue對數組的變化偵測
 * 思想: 經過一個攔截器來覆蓋Array.prototype。
 * 攔截器其實就是一個Object, 它的屬性與Array.prototype同樣。 只是對數組的變異方法進行了處理。
*/

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    })
}

// 數組原型對象
const arrayProto = Array.prototype
// 攔截器
const arrayMethods = Object.create(arrayProto)

// 變異數組方法：執行後會改變原始數組的方法
const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]

methodsToPatch.forEach(function (method) {
    // 緩存原始的數組原型上的方法
    const original = arrayProto[method]
    // 對每一個數組編譯方法進行處理(攔截)
    def(arrayMethods, method, function mutator (...args) {
      // 返回的value仍是經過數組原型方法自己執行的結果
      const result = original.apply(this, args)
      // 每一個value在被observer()時候都會打上一個__ob__屬性
      const ob = this.__ob__
      // 存儲調用執行變異數組方法致使數組自己值改變的數組，主要指的是原始數組增長的那部分(須要從新Observer)
      let inserted
      switch (method) {
        case 'push':
        case 'unshift':
          inserted = args
          break
        case 'splice':
          inserted = args.slice(2)
          break
      }
      // 從新Observe新增長的數組元素
      if (inserted) ob.observeArray(inserted)
      // 發送變化通知
      ob.dep.notify()
      return result
    })
})

複製代碼

關於Vue何時對data屬性進行Observer

若是熟悉Vue源碼的童鞋應該很快能找到Vue的入口文件vue/src/core/instance/index.js。瀏覽器

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
// 給原型綁定代理屬性$props, $data
// 給Vue原型綁定三個實例方法: vm.$watch，vm.$set，vm.$delete
stateMixin(Vue)
// 給Vue原型綁定事件相關的實例方法: vm.$on, vm.$once ,vm.$off , vm.$emit
eventsMixin(Vue)
// 給Vue原型綁定生命週期相關的實例方法: vm.$forceUpdate, vm.destroy, 以及私有方法_update
lifecycleMixin(Vue)
// 給Vue原型綁定生命週期相關的實例方法: vm.$nextTick, 以及私有方法_render, 以及一堆工具方法
renderMixin(Vue)

export default Vue
複製代碼

this.init()

源碼路徑: vue/src/core/instance/init.js。緩存

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    // 當前實例
    const vm: Component = this
    // a uid
    // 實例惟一標識
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    // 開發模式, 開啓Vue性能檢測和支持 performance.mark API 的瀏覽器上。
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      // 處於組件初始化階段開始打點
      mark(startTag)
    }

    // a flag to avoid this being observed
    // 標識爲一個Vue實例
    vm._isVue = true
    // merge options
    // 把咱們傳入的optionsMerge到$options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    // 初始化生命週期
    initLifecycle(vm)
    // 初始化事件中心
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    // 初始化State
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
    // 掛載
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}
複製代碼

initState()

源碼路徑:vue/src/core/instance/state.js。bash

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

複製代碼

這個時候你會發現observe出現了。閉包

observe

源碼路徑: vue/src/core/observer/index.jsapp

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
   // value已是一個響應式數據就再也不建立Observe實例, 避免重複偵聽
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // 出現目標, 建立一個Observer實例
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}
複製代碼

使用攔截器的時機

Vue的響應式系統中有個Observe類。源碼路徑:vue/src/core/observer/index.js。ide

// can we use __proto__?
export const hasProto = '__proto__' in {}

const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

function protoAugment (target, src: Object) {
  /* eslint-disable no-proto */
  target.__proto__ = src
  /* eslint-enable no-proto */
}

function copyAugment (target: Object, src: Object, keys: Array<string>) {
  // target: 須要被Observe的對象
  // src: 數組代理原型對象
  // keys: const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
  // keys: 數組代理原型對象上的幾個編譯方法名
  // const methodsToPatch = [
  //   'push',
  //   'pop',
  //   'shift',
  //   'unshift',
  //   'splice',
  //   'sort',
  //   'reverse'
  // ]
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    this.value = value
    // 
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    // 若是是數組
    if (Array.isArray(value)) {
      if (hasProto) {
        // 若是支持__proto__屬性(非標屬性, 大多數瀏覽器支持): 直接把原型指向代理原型對象
        protoAugment(value, arrayMethods)
      } else {
        // 不支持就在數組實例上掛載被加工處理過的同名的變異方法(且不可枚舉)來進行原型對象方法攔截
        // 當你訪問一個對象的方法時候, 只有當自身不存在時候纔會去原型對象上查找
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  /**
   * Walk through all properties and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  /**
   * 遍歷數組每一項來進行偵聽變化,即每一個元素執行一遍Observer()
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}
複製代碼

如何收集依賴

Vue裏面真正作數據響應式處理的是defineReactive()。 defineReactive方法就是把對象的數據屬性轉爲訪問器屬性, 即爲數據屬性設置get/set。

function dependArray (value: Array<any>) {
  for (let e, i = 0, l = value.length; i < l; i++) {
    e = value[i]
    e && e.__ob__ && e.__ob__.dep.depend()
    if (Array.isArray(e)) {
      dependArray(e)
    }
  }
}


export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  // dep在訪問器屬性中閉包使用
  // 每個數據字段都經過閉包引用着屬於本身的 dep 常量
  // 每一個字段的Dep對象都被用來收集那些屬於對應字段的依賴。
  const dep = new Dep()

  // 獲取該字段可能已有的屬性描述對象
  const property = Object.getOwnPropertyDescriptor(obj, key)
  // 邊界狀況處理： 一個不可配置的屬性是不能使用也不必使用 Object.defineProperty 改變其屬性定義的。
  if (property && property.configurable === false) {
    return
  }

  // 因爲一個對象的屬性極可能已是一個訪問器屬性了，因此該屬性極可能已經存在 get 或 set 方法
  // 若是接下來會使用 Object.defineProperty 函數從新定義屬性的 setter/getter
  // 這會致使屬性原有的 set 和 get 方法被覆蓋，因此要將屬性原有的 setter/getter 緩存
  const getter = property && property.get
  const setter = property && property.set
  // 邊界狀況處理
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  // 默認就是深度觀測，引用子屬性的__ob__
  // 爲Vue.set 或 Vue.delete 方法提供觸發依賴。
  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      // 若是 getter 存在那麼直接調用該函數，並以該函數的返回值做爲屬性的值，保證屬性的原有讀取操做正常運做
      // 若是 getter 不存在則使用 val 做爲屬性的值
      const value = getter ? getter.call(obj) : val
      // Dep.target的值是在對Watch實例化時候賦值的
      if (Dep.target) {
        // 開始收集依賴到dep
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            // 調用 dependArray 函數逐個觸發數組每一個元素的依賴收集
            dependArray(value)
          }
        }
      }
      // 正確地返回屬性值。
      return value
    },
    set: function reactiveSetter (newVal) {
      // 獲取原來的值
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      // 比較新舊值是否相等, 考慮NaN狀況
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      // 若是數據以前有setter, 那麼應該繼續使用該函數來設置屬性的值
      if (setter) {
        setter.call(obj, newVal)
      } else {
        // 賦新值
        val = newVal
      }
      // 因爲屬性被設置了新的值，那麼假如咱們爲屬性設置的新值是一個數組或者純對象，
      // 那麼該數組或純對象是未被觀測的，因此須要對新值進行觀測
      childOb = !shallow && observe(newVal)
      // 通知dep中的watcher更新
      dep.notify()
    }
  })
}

複製代碼

存儲數組依賴的列表

咱們爲何須要把依賴存在Observer實例上。即

export class Observer {
    constructor (value: any) {
        ...
        this.dep = new Dep()
    }
}
複製代碼

首先咱們須要在getter裏面訪問到Observer實例

// 即上述的
let childOb = !shallow && observe(val)
...
if (childOb) {
  // 調用Observer實例上dep的depend()方法收集依賴
  childOb.dep.depend()
  if (Array.isArray(value)) {
    // 調用 dependArray 函數逐個觸發數組每一個元素的依賴收集
    dependArray(value)
  }
}
複製代碼

另外咱們在前面提到的攔截器中要使用Observer實例。

methodsToPatch.forEach(function (method) {
    ...
    // this表示當前被操做的數據
    // 可是__ob__怎麼來的?
    const ob = this.__ob__
    ...
    // 從新Observe新增長的數組元素
    if (inserted) ob.observeArray(inserted)
    // 發送變化通知
    ob.dep.notify()
    ...
})
複製代碼

思考上述的this.__ob__屬性來自哪裏?

export class Observer {
    constructor () {
        ...
        this.dep = new Dep()
        // 在vue上新增一個不可枚舉的__ob__屬性, 這個屬性的值就是Observer實例
        // 所以咱們就能夠經過數組數據__ob__獲取Observer實例
        // 進而獲取__ob__上的dep
        def(value, '__ob__', this)
        ...
    }
}
複製代碼

牢記全部的屬性一旦被偵測了都會被打上一個__ob__的標記, 即表示是響應式數據。