理解vue數據驅動_ZenDei技術網路在線

vue是雙向數據綁定的框架，數據驅動是他的靈魂，他的實現原理眾所周知是Object.defineProperty方法實現的get、set重寫，但是這樣說太牽強外門了。本文將巨集觀介紹他的實現 + "使用vue" + "分析Object.defineProperty" + "簡單的源碼解析" + "一切 ...

vue是雙向數據綁定的框架，數據驅動是他的靈魂，他的實現原理眾所周知是Object.defineProperty方法實現的get、set重寫，但是這樣說太牽強外門了。本文將巨集觀介紹他的實現

使用vue
分析Object.defineProperty
簡單的源碼解析
通過案例進行分析
註意事項
附加討論

使用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 = 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 = {}, 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 = 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 = 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里更合適。