Vue如何實(shí)現(xiàn)響應(yīng)式系統(tǒng)

前言

最近深入學(xué)習(xí)了Vue實(shí)現(xiàn)響應(yīng)式的部分源碼，將我的些許收獲和思考記錄下來(lái)，希望能對(duì)看到這篇文章的人有所幫助。有什么問(wèn)題歡迎指出，大家共同進(jìn)步。

什么是響應(yīng)式系統(tǒng)

一句話概括：數(shù)據(jù)變更驅(qū)動(dòng)視圖更新。這樣我們就可以以“數(shù)據(jù)驅(qū)動(dòng)”的思維來(lái)編寫(xiě)我們的代碼，更多的關(guān)注業(yè)務(wù)，而不是dom操作。其實(shí)Vue響應(yīng)式的實(shí)現(xiàn)是一個(gè)變化追蹤和變化應(yīng)用的過(guò)程。

vue響應(yīng)式原理

以數(shù)據(jù)劫持方式，攔截?cái)?shù)據(jù)變化；以依賴收集方式，觸發(fā)視圖更新。利用es5 Object.defineProperty攔截?cái)?shù)據(jù)的setter、getter；getter收集依賴，setter觸發(fā)依賴更新，而組件render也會(huì)變?yōu)橐粋€(gè)watcher callback被加入相應(yīng)數(shù)據(jù)的依賴中。

發(fā)布訂閱

利用發(fā)布訂閱設(shè)計(jì)模式實(shí)現(xiàn)，Observer作為發(fā)布者，Watcher作為訂閱者，兩者無(wú)直接交互，通過(guò)Dep進(jìn)行統(tǒng)一調(diào)度。
Observer負(fù)責(zé)攔截get, set；get時(shí)觸發(fā)dep添加依賴，set時(shí)調(diào)度dep發(fā)布；添加Watcher時(shí)會(huì)觸發(fā)訂閱數(shù)據(jù)的get，并加入到dep調(diào)度中心的訂閱者隊(duì)列中。

以下的UML類(lèi)圖是Vue實(shí)現(xiàn)響應(yīng)式功能的類(lèi)，以及他們之間的引用關(guān)系。

只包含部分屬性方法

上圖中的類(lèi)已經(jīng)標(biāo)識(shí)的蠻清楚了，但是還是需要一個(gè)調(diào)用關(guān)系圖，讓調(diào)用過(guò)程更加清晰，如下圖所示。

響應(yīng)式data對(duì)象中，每一項(xiàng)key的劫持get/set函數(shù)都閉包了Dep調(diào)度實(shí)例，這張圖顯示了一個(gè)key更改過(guò)程中的數(shù)據(jù)流轉(zhuǎn)。

部分源碼

數(shù)據(jù)變更過(guò)程中的訂閱/發(fā)布模型上圖已經(jīng)清晰的展示了，從圖中我們已經(jīng)知道了可以通過(guò)增加watcher來(lái)訂閱某一項(xiàng)數(shù)據(jù)的變更。那么，我們只需要把組件render作為一個(gè)watcher訂閱的話，數(shù)據(jù)驅(qū)動(dòng)視圖的渲染豈不是水到渠成了。Vue正是這么做的！
以下代碼片段來(lái)自Vue.prototype._mount函數(shù)

callHook(vm, 'beforeMount')
vm._watcher = new Watcher(vm, () => {
 vm._update(vm._render(), hydrating)
}, noop)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
 vm._isMounted = true
 callHook(vm, 'mounted')
}

一些問(wèn)題思考

#person賦值新的對(duì)象，新對(duì)象里的屬性是否也是響應(yīng)式的呢？

var vm = new Vue({
 el: '#app',
 data: () => ({
  person: null
 })
})
vm.person = {name: 'zs'}
setTimeout(() => {
 // 更改name
 vm.person.name = 'finally zs'
}, 3000)

答案：是響應(yīng)式的。

原因：因?yàn)?Vue劫持set時(shí)，會(huì)對(duì)value再次做observe，源碼如下。

function reactiveSetter (newVal) {
 /* ...省略部分代碼 */
 // 這里會(huì)再次對(duì)新的value做攔截
 childOb = observe(newVal)
 dep.notify()
}

#當(dāng)我們監(jiān)聽(tīng)多層屬性時(shí)，上層引用變更，是否會(huì)觸發(fā)回調(diào)？

var vm = new Vue({
 data: () => ({
  person: {name: '令狐洋蔥'}
 }),
 watch: {
  'person.name'(val) {
   console.log('name updated', val)
  }
 }
})
vm.person = {}

答案：會(huì)。

原因：person.name作為一個(gè)表達(dá)式傳入Watcher時(shí)，會(huì)被解析成類(lèi)似這樣的函數(shù)

() => {this.vm.person.name}

這樣就會(huì)先觸發(fā)person get, 然后觸發(fā)name get；所以我們配置的回調(diào)函數(shù)，不僅僅加入到了name依賴中，person也有。

#接著上個(gè)問(wèn)題，person如果被賦值了新的對(duì)象，老對(duì)象和老對(duì)象上的依賴如何垃圾回收的？

• 老對(duì)象的回收：由于老對(duì)象的直接引用只有vue實(shí)例上的person，person切換到了新的引用，所以老對(duì)象沒(méi)有引用了，就會(huì)被回收掉。
• 老對(duì)象上的依賴dep，watcher的依賴里還存在；但是在run執(zhí)行時(shí)，會(huì)調(diào)用watcher的get() 獲取當(dāng)前值；get中會(huì)執(zhí)行新的依賴收集，并在收集完畢后，清空老的依賴。
  

具體源碼如下：

/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
  pushTarget(this)
  const value = this.getter.call(this.vm, this.vm)
  // "touch" every property so they are all tracked as
  // dependencies for deep watching
  if (this.deep) {
    traverse(value)
  }
  popTarget()
  this.cleanupDeps()
  return value
}

#當(dāng)我們多次同步修改name時(shí)，回調(diào)函數(shù)是否會(huì)觸發(fā)多次？

var vm = new Vue({
  data: () => ({
    person: {name: '令狐洋蔥'}
  }),
  watch: {
    'person.name': (val) {
      console.log('name updated: ' + val)
    }
  }
})
vm.person = {name: 'zs'}
vm.person.name = '無(wú)敵'

答案: 不會(huì)，因?yàn)閣atch回調(diào)函數(shù)執(zhí)行是異步的，且會(huì)去重?？梢酝ㄟ^(guò)sync強(qiáng)制配置成同步run，就會(huì)執(zhí)行2次了。

自己實(shí)現(xiàn)一個(gè)響應(yīng)式系統(tǒng)

只包含核心功能，具體源碼可以看這里https://github.com/Zenser/z-vue，歡迎來(lái)star。

實(shí)現(xiàn)功能非?；A(chǔ)啦，重在理解，功能不全的。

Observer

class Observe {
  constructor(obj) {
    Object.keys(obj).forEach(prop => {
      reactive(obj, prop, obj[prop])
    })
  }
}
function reactive(obj, prop) {
  let value = obj[prop]
  // 閉包綁定依賴
  let dep = new Dep()
  Object.defineProperty(obj, prop, {
    configurable: true,
    enumerable: true,
    get() {
      //利用js單線程，在get時(shí)綁定訂閱者
      if (Dep.target) {
        // 綁定訂閱者
        dep.addSub(Dep.target)
      }
      return value
    },
    set(newVal) {
      value = newVal
      // 更新時(shí)，觸發(fā)訂閱者更新
      dep.notify()
    }
  })
  // 對(duì)象監(jiān)聽(tīng)
  if (typeof value === 'object' && value !== null) {
    Object.keys(value).forEach(valueProp => {
      reactive(value, valueProp)
    })
  } 
}

Dep

class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    if (this.subs.indexOf(sub) === -1) {
      this.subs.push(sub)
    }
  }
  notify() {
    this.subs.forEach(sub => {
      const oldVal = sub.value
      sub.cb && sub.cb(sub.get(), oldVal)
    })
  }
}

Watcher

class Watcher {
  constructor(data, exp, cb) {
    this.data = data
    this.exp = exp
    this.cb = cb
    this.get()
  }
  get() {
    Dep.target = this
    this.value = (function calcValue(data, prop) {
      for (let i = 0, len = prop.length; i < len; i++ ) {
        data = data[prop[i]]
      }
      return data
    })(this.data, this.exp.split('.'))
    Dep.target = null
    return this.value
  }
}

參考文檔：https://cn.vuejs.org/v2/guide/reactivity.html