淺析Vue響應(yīng)式原理（三）

tomener 發(fā)布于2019-08-23 13:49 / 2876人閱讀

摘要：響應(yīng)式原理之不論如何，最終響應(yīng)式數(shù)據(jù)都要通過來實(shí)現(xiàn)，實(shí)際要借助新增的。在函數(shù)內(nèi)，首先實(shí)例化一個(gè)實(shí)例，會(huì)在稍后添加為響應(yīng)式數(shù)據(jù)自定義的中發(fā)揮作用。只有數(shù)組和對(duì)象才可能是響應(yīng)式，才能返回實(shí)例。參考鏈接技術(shù)內(nèi)幕揭開數(shù)據(jù)響應(yīng)系統(tǒng)的面紗源碼

Vue響應(yīng)式原理之defineReactive defineReactive

不論如何，最終響應(yīng)式數(shù)據(jù)都要通過defineReactive來實(shí)現(xiàn)，實(shí)際要借助ES5新增的Object.defineProperty。

defineReactive接受五個(gè)參數(shù)。obj是要添加響應(yīng)式數(shù)據(jù)的對(duì)象；key是屬性名，val是屬性名對(duì)應(yīng)的取值；customSetter是用戶自定義的setter；會(huì)在響應(yīng)式數(shù)據(jù)的setter中執(zhí)行，只有開發(fā)環(huán)境可用；通過shallow指定是否淺比較，默認(rèn)深比較。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  const getter = property && property.get
  if (!getter && arguments.length === 2) {
    val = obj[key]
  }
  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
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== "production" && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

在函數(shù)內(nèi)，首先實(shí)例化一個(gè)Dep實(shí)例dep，dep會(huì)在稍后添加為響應(yīng)式數(shù)據(jù)自定義的get/set中發(fā)揮作用。接著獲取屬性描述符，如果屬性不可配置，則無法調(diào)用Object.defineProperty來修改setter/getter，所以返回。

如果原來已設(shè)置過setter/getter，緩存起來。當(dāng)未自定義getter且arguments長度為2（即只傳入了obj和key）時(shí)，可以直接用方括號(hào)求值，使用閉包變量val緩存初始值。

如果不是淺復(fù)制，執(zhí)行observe(val)，為val添加__ob__屬性并返回__ob__指向的Observer實(shí)例。（只有數(shù)組和對(duì)象才可能是響應(yīng)式，才能返回Observer實(shí)例）。

使用Object.defineProperty為obj[key]設(shè)置getter和setter。

在get內(nèi)，如果原來已設(shè)置過getter，則用緩存的getter求值，否則使用閉包變量val作為返回值；同時(shí)添加依賴。此處為兩個(gè)Dep實(shí)例添加依賴。dep是閉包變量，在getter/setter中會(huì)使用到。另一個(gè)Dep實(shí)例是childOb.dep，只用調(diào)用set/delete更新響應(yīng)式數(shù)據(jù)時(shí)，才會(huì)觸發(fā)；如果value是數(shù)組，還會(huì)遍歷元素，為存在__ob__屬性的元素收集依賴。

在set內(nèi)，先獲取更新前的值（邏輯和get內(nèi)第一步一樣）。判斷更新前后的值是否相等，相等時(shí)直接返回；不等時(shí)，如果有緩存的setter，調(diào)用緩存的setter更新，否則直接賦值。值得注意的是，NaN === NaN是不成立的，反而NaN !== NaN是成立的，后面的判斷語句newVal !== newVal && value !== value就是為了避免newVal/val都是NaN。在更新后的值newVal上執(zhí)行observe，更新閉包變量childOb，并調(diào)用notify。