理解vue資料驅動-有解無憂

vue是雙向資料系結的框架，資料驅動是他的靈魂，他的實作原理眾所周知是Object.defineProperty方法實作的get、set重寫，但是這樣說太牽強外門了，本文將宏觀介紹他的實作

使用vue
分析Object.defineProperty
簡單的原始碼決議
- 一切從頭開始
- 資料驅動部分-觀察者
- vue掛載到dom
- 簡述Watcher
- 從宏觀角度看問題
通過案例進行分析
- vue資料驅動的前提
- 看到的未必真實的
- 看到的未必真實2
注意事項
附加討論

使用vue

舉個非常簡單的栗子

# html
<div id="#app">
  {{msg}}
</div>

# script
<script>
new Vue({
  el: '#app',
  data: {
    msg: 'hello'
  },
  mounted() {
    setTimeout(() => {
      this.msg = 'hi'
    }, 1000);
  }
})
</script>

上面代碼， new Vue進行創建vue物件， el屬性是掛載的dom選擇器，這里選擇id為app的dom，data物件保存這所有資料回應的屬性，當其中的某一屬性值改變，就觸發view渲染，從而實作了“資料->視圖”的動態回應；

示例中msg初始值為hello，因此頁面渲染時為hello，一秒之后，msg變為了hi，觸發了view渲染，我們看到hello變為了li，那么接下來就從這簡單的栗子來講解vue的資料驅動把，

分析Object.defineProperty

我們說vue是怎么實作雙向資料系結的？是Object.defineProperty實作了，那么我們就直接聚焦Object.defineProperty

以下是代碼

function defineReactive (
  obj,
  key,
  val,
  customSetter,
  shallow
) {
  // 創建派發器
  var dep = new Dep();

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

  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }

  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = https://www.cnblogs.com/xujiazheng/p/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) {
      var 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 ("development" !=='production' && customSetter) {
        customSetter();
      }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      dep.notify();
    }
  });
}

vue在給每一個data的屬性執行defineReactive函式，來達到資料系結的目的，從代碼中可以看到幾點：

每一個資料系結，都會new一個Dep（暫且叫他派發器），派發器的功能是什么？依賴收集以事件分發；
在屬性get中，除了獲取當前屬性的值，還做了dep.depend()操作；
dep.depend的目的是什么？看Dep部分代碼，很簡單，其實就是依賴收集，將Dep.target需要收集的依賴進行添加到自己的派發器里
在屬性set時，就是給屬性改變值時，除了改變值意外，還執行了dep.notify()操作；
dep.notify的目的又是什么？看代碼，依舊很簡單，將自己派發器的所有依賴觸發update函式；

這一部分很容易了解，在data的屬性get時，觸發了派發器的依賴收集(dep.depend)，在data的屬性set時，觸發了派發器的事件通知(dep.notify)；

結合已知知識，Vue的資料系結是上面這個函式帶來的副作用，因此可以得出結論：

當我們改變某個屬性值時，派發器Dep通知了view層去更新
Dep.target是派發器Dep收集的依賴，并在屬性值改變時觸發了update函式，view層的更新與Dep.target有必然的聯系，換句話說：資料->視圖的資料驅動就等于Dep.target.update()

簡單的原始碼決議

上一節已經確定，當更改屬性值時，是Dep.target.update更新了view，因此帶著這個目的，此小節做一個簡單的原始碼決議

一切從頭開始

function Vue (options) {
  this._init(options);
}

Vue.prototype._init = function (options) {
  var vm = this;
  callHook(vm, 'beforeCreate');
  initState(vm);
  callHook(vm, 'created');

  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
  }
};

function initState (vm) {
  vm._watchers = [];
  var opts = vm.$options;
  if (opts.data) {
    initData(vm);
  } else {
    observe(vm._data = https://www.cnblogs.com/xujiazheng/p/{}, true /* asRootData */);
  }
}

function initData (vm) {
  var data = vm.$options.data;
  observe(data, true /* asRootData */);
}

function observe (value, asRootData) {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  var ob = new Observer(value);;
  return ob
}

從頭開始，一步一步進入，發現最終我們new Vue傳進來的data進入了new Observer中；

資料驅動部分-觀察者

var Observer = function Observer (value) {
  this.value = https://www.cnblogs.com/xujiazheng/p/value;
  this.dep = new Dep();
  this.vmCount = 0;
  def(value,'__ob__', this);
  if (Array.isArray(value)) {
    var augment = hasProto
      ? protoAugment
      : copyAugment;
    augment(value, arrayMethods, arrayKeys);
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};
Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
    defineReactive(obj, keys[i]);
  }
};

Observer建構式中，最終執行了defineReactive為每一個屬性進行定義，并且是遞回呼叫，以樹型遍歷我們傳入的data物件的所有節點屬性，每一個節點都會被包裝為一個觀察者，當資料get時，進行依賴收集，當資料set時，事件分發，

看到這里，感覺好像少了點什么，好像data到這里就結束了，但是并沒有看懂為什么資料改變更新視圖的，那么繼續往下看

vue掛載到dom

回看一切從頭開始的_init方法，在這個方法中，最后呼叫了 vm.$mount(vm.$options.el)，這是把vm掛載到真實dom，并渲染view的地方，因此接著看下去，

Vue.prototype.$mount = function (
  el,
  hydrating
) {
  return mountComponent(this, el, hydrating)
};
// 渲染dom的真實函式
function mountComponent (
  vm,
  el,
  hydrating
) {
  vm.$el = el;
  callHook(vm, 'beforeMount');

  var updateComponent;
  updateComponent = function () {
    vm._update(vm._render(), hydrating);
  };
  // new 一個Watcher，開啟了資料驅動之旅
  new Watcher(vm, updateComponent, noop, {
    before: function before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate');
      }
    }
  }, true /* isRenderWatcher */);
  hydrating = false;
  if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, 'mounted');
  }
  return vm
}

上面部分看到的是，vue將vue物件掛載到真實dom的經歷，最終執行了new Watcher，并且回呼為vm._update(vm._render(), hydrating)，顧名思義，這里是執行了vue的更新view的操作（本文暫且不講更新view，在其他文章已經講過，本文專注資料驅動部分），

問：為什么說new Watcher開啟了資料驅動之旅呢？Watcher又是什么功能？

簡述Watcher

如果說Object.defineProperty是vue資料驅動的靈魂，那么Watcher則是他的骨骼，

// 超級簡單的Watcher
var Watcher = function Watcher (
  vm,
  expOrFn,
  cb,
  options,
  isRenderWatcher
) {
  this.cb = cb;
  this.deps = [];
  this.newDeps = [];
  // 計算屬性走if
  if (this.computed) {
    this.value = https://www.cnblogs.com/xujiazheng/p/undefined;
    this.dep = new Dep();
  } else {
    this.value = this.get();
  }
};

Watcher.prototype.get = function get () {
  pushTarget(this);
  var value;
  var vm = this.vm;
  try {
    value = this.getter.call(vm, vm);
  } catch (e) {
    if (this.user) {
      handleError(e, vm, ("getter for watcher /"" + (this.expression) + "/""));
    } else {
      throw e
    }
  } finally {
    popTarget();
    this.cleanupDeps();
  }
  return value
};

簡化后Watcher在new時，最侄訓呼叫自己的get方法，get方法中第一個陳述句pushTarget(this)是開啟資料驅動的第一把鑰匙，看下文

function pushTarget (_target) {
  if (Dep.target) { targetStack.push(Dep.target); }
  Dep.target = _target;
}

pushTarget將傳入的Watcher物件賦值給了Dep.target，還記得在講Object.defineProperty時提到了，Dep.target.update是更新view的觸發點，在這里終于找到了！

下面看Dep.targe.update

Watcher.prototype.update = function update () {
  var this$1 = this;

  /* istanbul ignore else */
  if (this.computed) {
    if (this.dep.subs.length === 0) {
      this.dirty = true;
    } else {
      this.getAndInvoke(function () {
        this$1.dep.notify();
      });
    }
  } else if (this.sync) {
    this.run();
  } else {
  // update執行了這里
    queueWatcher(this);
  }
};

我們看到update方法最后執行了queueWatcher，繼續看下去發現，這其實是一個更新佇列，vue對同一個微任務的所有update進行了收集更新，最終執行了watcher.run，run方法又執行了getAndInvoke方法，getAndInvoke又執行了this.get方法，

到來一大圈，終于找到：在改變屬性值時，觸發了Dep.target所對應的Watcher的 this.get方法，this.get方法其實就是傳入進來的回呼函式，回想前面介紹的，vue在掛載到真實dom時，new Watcher傳入的回呼是updateComponent，串聯起來得到了結論：

我們在get屬性時，Dep派發器收集到了Watcher當作依賴
當我們set屬性時，Dep派發器事件分發，使所有收集到的依賴執行this.get，這時候view會更新，

到這里，有沒有明白為什么所有屬性的派發器都會收集updateComponent的Watcher，從而在自己set時通知更新？如果沒明白，那就看下一節分析

從宏觀角度看問題

當我們new Vue時，首先會將傳入的data將被vue包裝為觀察者，所有get和set行為都會捕捉到并執行回應的操作
接下來vue會將vue物件掛載到真實dom（其實指的虛擬的渲染），這個時候new 一個Watcher，在new Watcher時，會執行一次this.get初始化一次值，對標updateComponent函式，這個時候會觸發vue渲染程序
在vue渲染程序中，所有的資料都需要進行get行為才能得到值并給真實dom賦值，因此這時觸發了所有data屬性的get，并且此時Dep.target是updateComponent的Watcher，因此所有的data屬性派發器都收集到了此Watcher，在set時，派發器notify進行事件分發，收集到的依賴Watcher都得到了通知進行update，所有又會執行updateCompoent進行更新view

通過案例進行分析

vue資料驅動的前提

vue資料驅動是有前提條件的，不是怎么用都可以的，前提條件就是必須在data中宣告的屬性才會參與資料驅動，資料->視圖，看下面栗子

有如下html：

<div id="app">
    <div>{{prev}}{{next}}</div>
</div>

如下js：

new Vue({
  el: "#app",
  data: {
    prev: 'hello',
  },
  created() {
  },
  mounted() {
    this.next = 'world';
  }
})

頁面渲染的結果是什呢？

答：hello；

為什么this.next明明賦值，沒有渲染到view中去？因為他并沒有參與資料驅動的觀察者，還記得前面講到vue會把傳入的data物件深度遍歷包裝為觀察者來吧，這里next屬性并沒有被成為觀察者，因此并不會引發view更新，

看到的未必真實的

為什么看到的未必真實的，上面的栗子我們發現，view中看到的只有hello，但是資料真的是有hello么？未必，看下面栗子，

new Vue({
  el: "#app",
  data: {
    prev: 'hello',
  },
  created() {
  },
  mounted() {
    this.next = 'world';
    setTimeout(() => {
      this.prev = 'hi';
      
    }, 1000);
  }
})

這個代碼比上面栗子就多了3行代碼，再頁面渲染1秒后，改變prev的值為hi，那么頁面會展現什么效果呢？

答：hi world

從這里可以看到，雖然next賦值并沒有引起view更新，但是data確實成功變更了，當prev改變時，觸發了update，從而將view更新，此時next有值，因此就顯示在了view中，這就是很多初學者會遇到為什么明明賦值沒有顯示，但是點了一下其他的東西，卻顯示了的問題，

看到的未必真實2

還是根據第一個栗子引申一個案例如下：

new Vue({
  el: "#app",
  data: {
    prev: 'hello',
  },
  created() {
    this.next = 'world';
  },
  mounted() {
    setTimeout(() => {
      this.next = 'memory'
    }, 1000)
  }
})

我們在created生命周期中賦值next，在mounted生命周期延遲一秒改變next的值，那結果會這樣？

答：永遠顯示helloworld

如果已經掌握了vue實體化程序的同學可能已經猜到了為什么

當created生命周期執行時，此時還沒有做vnode轉化為真實dom的操作，此時data屬性已經代理到this下，因此修改this.next就修改了data物件的值，data就變為了{prev: 'hello', next: 'world'},因此在render時就將next也渲染到了頁面上

另外此時已經完成了資料驅動的靈魂步驟（將data遍歷包裝為觀察者），因此在延遲1s后改變next值，仍然跟栗子2一樣不會引起view更新的，

因此，寫vue出現以上改變data時view未更新，首先要檢查自己的代碼，而不是懷疑vue框架的問題，，

注意事項

本文參考vue版本v2.5.17-beta.0
本文專注資料驅動主線data，computed等支線并沒有介紹，因此貼的代碼都做了大量刪減
data屬性收集到的依賴Dep.target并不止updateComponent的Watcher，還可能多個，比如computed屬性

附加討論

有些面試官會問在異步獲取資料并改變data值時，放在created還是mounted？

我感覺沒什么可答的，2個都沒問題，當然對于代碼優化，放在created更早的發出請求，因此放在created里更合適，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/29307.html

標籤：設計模式

上一篇：UI自動化技術在高德的實踐

下一篇：圖解Java設計模式之設計模式面試題