解讀Vue之怎樣把資料包裝成reactive從而達到MDV效果

這篇文章就來講講 vue 是如何把資料包裝成 reactive，從而實現 MDV(Model-Driven-View) 的效果，希望對大家有幫助。

先說明什麼叫做 reactive，簡單來說，就是將資料包裝成一種可觀測的類型，當資料產生變更的時候，我們能夠感知到。

而Vue 的相關實作程式碼全部都在core/observer 目錄下，而要自行閱讀的話，建議從core/instance/index.js 中開始。

在開始講 reactive 的具體實作之前，先說幾個物件：Watcher、Dep、Observer。

Watcher

Watcher 是 vue 實作的一個用於觀測資料的對象，具體實作在 core/observer/watcher.js 中。

這個類別主要是用來觀察方法/表達式中引用到的資料（資料需要是 reative 的，即 data 或 props）變更，當變更後做出對應處理。先來看看 Watcher 這個類別的入參：

vm: Component,expOrFn: string | Function,cb: Function,options?: Object

解釋一下這幾個入參是幹嘛的：

##vm：目前這個 watcher 所屬的 VueComponent。
• expOrFn：需要監聽的 方法/表達式。舉個例子：VueComponent 的render function，或是computed 的getter 方法，再或是
• abc.bbc.aac這種類型的字串（由於vue 的parsePath 方法是用split('.')來做的屬性分割，所以不支援abc['bbc']）。 expOrFn 如果是方法，則直接賦值給 watcher 的 getter 屬性，如果是表達式，則會轉換成方法再給 getter。
cb：當 getter 中引用到的 data 改變的時候，就會觸發該回呼。
• options：額外參數，可以傳入的參數為包含
• deep、user，lazy，sync，這些值預設都是為false。
  deep 如果為 true，會對 getter 傳回的物件再做一次深度遍歷，進行進一步的依賴收集。
  • user 是用來標記這個監聽是否由使用者透過 $watch 呼叫的。
  • lazy 用於標記watcher 是否為懶執行，該屬性是給computed data 用的，當data 中的值更改的時候，不會立即計算getter 獲取新的數值，而是給該watcher 標記為
  • dirty，當該computed data 被引用的時候才會執行從而傳回新的computed data，從而減少計算量。
  sync 是表示當 data 中的值改變的時候，watcher 是否同步更新數據，如果是 true，就會立即更新數值，否則在 nextTick 中更新。

了解了入參是用來幹嘛的之後，也基本上知道 Watcher 這個物件做了啥。

Dep

Dep 則是vue 實作的一個處理依賴關係的對象，具體實作在

core/observer/dep.js 中，程式碼量相當少，很容易理解。

Dep 主要起到一個紐帶的作用，就是連接 reactive data 與 watcher，每一個 reactive data 的創建，都會隨著創建一個 dep 實例。請參閱 observer/index.js 中的

defineReactive 方法，精簡的 defineReactive 方法如下。

function defineReactive(obj, key, value) {
    const dep = new Dep();
    Object.defineProperty(obj, key, {
        get() {
          if (Dep.target) {
            dep.depend();
          }
          return value        }
        set(newValue) {
            value = newValue;
            dep.notify();
        }
    })}

建立完 dep 實例後，就會為該 data 注入 getter 和 setter 的邏輯，當該 data 被引用的時候，就會觸發 getter，而什麼時候 data 會被引用呢？就是在 watcher 執行 getter 的時候，而當 watcher 執行 getter 的時候，watcher 會被塞入 Dep.target，然後透過呼叫 dep.depend() 方法，這個資料的 dep 就和 watcher 創造了連結。

建立連線之後，當 data 被更改，觸發了 setter 邏輯。然後就可以透過 dep.notify() 通知到所有與 dep 建立了關聯的 watcher。從而讓各個 watcher 做出回應。

例如我 watch 了一個 data ，並且在一個 computed data 中引用了同一個 data。再同時，我在template 中也有明確引用了這個data，那麼此時，這個data 的dep 裡就關聯了三個watcher，一個是render function 的watcher，一個是computed 的watcher，一個是用戶自己調用$ watch 方法所建立的watcher。當 data 發生變更後，這個 data 的 dep 就會通知到這三個 watcher 做出對應處理。

Observer

Observer 可以把一個 plainObject 或 array 變成 reactive 的。程式碼很少，就是遍歷 plainObject 或 array，對每一個鍵值呼叫

defineReactive 方法。

流程

以上三個類別介紹完了，基本上對 vue reactive 的實作應該有個模糊的認識，接下來，就結合實例講一下整個流程。

在 vue 實例化的時候，會先呼叫 initData，再呼叫 initComputed，最後再呼叫 mountComponent 建立 render function 的 watcher。從而完成一個 VueComponent 的資料 reactive 化。

initData

initData 方法在 core/instance/state.js 中，而这个方法里大部分都是做一些判断，比如防止 data 里有跟 methods 里重复的命名之类的。核心其实就一行代码：

observe(data, true)

而这个 observe 方法干的事就是创建一个 Observer 对象，而 Observer 对象就像我上面说的，对 data 进行遍历，并且调用 defineReactive 方法。

就会使用 data 节点创建一个 Observer 对象，然后对 data 下的所有数据，依次进行 reactive 的处理，也就是调用 defineReactive 方法。当执行完 defineReactive 方法之后，data 里的每一个属性，都被注入了 getter 以及 setter 逻辑，并且创建了 dep 对象。至此 initData 执行完毕。

initComputed

然后是 initComputed 方法。这个方法就是处理 vue 中 computed 节点下的数据，遍历 computed 节点，获取 key 和 value，创建 watcher 对象，如果 value 是方法，实例化 watcher 的入参 expOrFn 则为 value，否则是 value.get。

function initComputed (vm: Component, computed: Object) {
  ...  const watchers = vm._computedWatchers = Object.create(null)  for (const key in computed) {
    const userDef = computed[key]    let getter = typeof userDef === 'function' ? userDef : userDef.get
    ...
    watchers[key] = new Watcher(vm, getter, noop, { lazy: true })    if (!(key in vm)) {
      defineComputed(vm, key, userDef)    } else if (process.env.NODE_ENV !== 'production') {
      ...    }
  }}

我们知道 expOrFn 是可以为方法，也可以是字符串的。因此，通过上面的代码我们发现了一种官方文档里没有说明的用法，比如我的 data 结构如下

{ obj: { list: [{value: '123'}] } }

如果我们要在 template 中需要使用 list 中第一个节点的 value 属性 值，就写个 computed：

computed: {
  value: { get: 'obj.list.0.value' }}

然后在 template 中使用的时候，直接用{<!-- -->{ value }}，这样的话，就算 list 为空，也能保证不会报错，类似于 lodash.get 的用法。OK，扯远了，回到正题上。

创建完 watcher，就通过 Object.defineProperty 把 computed 的 key 挂载到 vm 上。并且在 getter 中添加以下逻辑

 if (watcher.dirty) {
   watcher.evaluate() }
 if (Dep.target) {
   watcher.depend() }
 return watcher.value

前面我有说过，computed data 的 watcher 是 lazy 的，当 computed data 中引用的 data 发生改变后，是不会立马重新计算值的，而只是标记一下 dirty 为 true，然后当这个 computed data 被引用的时候，上面的 getter 逻辑就会判断 watcher 是否为 dirty，如果是，就重新计算值。

而后面那一段watcher.depend。则是为了收集 computed data 中用到的 data 的依赖，从而能够实现当 computed data 中引用的 data 发生更改时，也能触发到 render function 的重新执行。

  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()    }
  }

mountComponent

把 data 以及 computed 都初始化好之后，则创建一个 render function 的 watcher。逻辑如下：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean): Component {
  vm.$el = el
  ...  callHook(vm, 'beforeMount')  let updateComponent
  ...
    updateComponent = () => {
      vm._update(vm._render(), hydrating)    }
  ...  vm._watcher = new Watcher(vm, updateComponent, noop)  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')  }
  return vm}

可以看到，创建 watcher 时候的入参 expOrFn 为 updateComponent 方法，而 updateComponent 方法中则是执行了 render function。而这个 watcher 不是 lazy 的，因此创建该 watcher 的时候，就会立马执行 render function 了，当执行 render function 的时候。如果 template 中有使用 data，则会触发 data 的 getter 逻辑，然后执行 dep.depend() 进行依赖收集，如果 template 中有使用 computed 的参数，也会触发 computed 的 getter 逻辑，从而再收集 computed 的方法中引用的 data 的依赖。最终完成全部依赖的收集。

最后举个例子：

<template>
    <p>{{ test }}</p></template><script>
  export default {
    data() {
      return {
        name: 'cool'
      }
    },
    computed: {
      test() {
        return this.name + 'test';
      }
    }
  }</script>

初始化流程：

1. 将 name 处理为 reactive，创建 dep 实例
2. 将 test 绑到 vm，创建 test 的 watcher 实例 watch1，添加 getter 逻辑。
3. 创建 render function 的 watcher 实例 watcher2，并且立即执行 render function。
4. 执行 render function 的时候，触发到 test 的 getter 逻辑，watcher1 及 watcher2 均与 dep 创建映射关系。

name 的值变更后的更新流程：

1. 遍历绑定的 watcher 列表，执行 watcher.update()。
2. watcher1.dirty 置为为 true。
3. watcher2 重新执行 render function，触发到 test 的 getter，因为 watcher1.dirty 为 true，因此重新计算 test 的值，test 的值更新。
4. 重渲染 view

【相关推荐：《vue.js教程》】

以上是解讀Vue之怎樣把資料包裝成reactive從而達到MDV效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！