Vue 基礎原理

前言：哥哥教你斷點學習下

new Vue 做了什麼

各種初始化

初始化流程	描述
initLifecycle	初始化生命週期
initEvents	事件
initRender	render 渲染函數
callHook(vm, ‘beforeCreate’);
initInjections	resolve injections before data/props
initState	初始化 props,data,method,computed,watch
initProvide	resolve provide after data/props
callHook(vm, ‘created’)

  Vue.prototype._init = function (options) {
    var vm = this;
    // a uid
    vm._uid = uid$3++;

    var startTag, endTag;
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = "vue-perf-start:" + (vm._uid);
      endTag = "vue-perf-end:" + (vm._uid);
      mark(startTag);
    }

    // a flag to avoid this being observed
    vm._isVue = true;
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options);
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      );
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm);
    } else {
      vm._renderProxy = vm;
    }
    // expose real self
    vm._self = vm;
    initLifecycle(vm);
    initEvents(vm);
    initRender(vm);
    callHook(vm, 'beforeCreate');
    initInjections(vm); // resolve injections before data/props
    initState(vm);
    initProvide(vm); // resolve provide after data/props
    callHook(vm, 'created');

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false);
      mark(endTag);
      measure(("vue " + (vm._name) + " init"), startTag, endTag);
    }

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

初始化 $mount("#app") 做了什麼

綁定部分生命週期，掛載DIV

第一步：找到掛載div 綁定
第二部：mountComponent 綁定 render 同時 callhook beforeMount,
第三部：Watcher 對象 render 同時監聽渲染 callHook(vm, ‘beforeUpdate’);
第四部:callHook(vm, ‘mounted’);

function mountComponent (  vm,  el, hydrating ) {
  vm.$el = el;
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
    if (process.env.NODE_ENV !== 'production') {
    ...
  }
  callHook(vm, 'beforeMount');

  var updateComponent;
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = function () {
      var name = vm._name;
      var id = vm._uid;
      var startTag = "vue-perf-start:" + id;
      var endTag = "vue-perf-end:" + id;

      mark(startTag);
      var vnode = vm._render();
      mark(endTag);
      measure(("vue " + name + " render"), startTag, endTag);

      mark(startTag);
      vm._update(vnode, hydrating);
      mark(endTag);
      measure(("vue " + name + " patch"), startTag, endTag);
    };
  } else {
    updateComponent = function () {
      vm._update(vm._render(), hydrating);
    };
  }

  new Watcher(vm, updateComponent, noop, {
    before: function before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate');
      }
    }
  }, true /* isRenderWatcher */);
  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');
  }
  return vm
}

衍生問題:
document.getElementById 和 document.querySelector 區別

data 值是怎麼綁定的呢

在項目初始化的時候對data 數據進行判斷
：注意不能和methods 種的函數 props 由重複
使用 Object.defineProperty 來進行數據綁定監聽

data 的值是怎麼在dom 中進行動態變化的

首先 vue 文件被解析成對象VNode ，在對象裏面獲取 data 中的值
在數據變化後（set 後）會dep.notify() 通知所有依賴的watch 進行update更新
update 時會重新render
通過新的 Vnode 進行對比然後替換重新生成 el
由興趣可以跟蹤一下 patch 這個方法，很有意思

這裏有個東西需要注意虛擬Dom 這些事件是綁定在虛擬dom 上面簡單來說，綁定事件的時候Dom還沒有注入的 body 裏面

事件綁定是怎麼實現的

同上一樣，我們的所有綁定之初都是在 VNode 的基礎上去進行綁定保存的
但是 el 上面的綁定是在 createElement 上面綁定的
具體而言
在chorme 中找到綁定事件然後向上查找
發現是通過 updateListeners 這方法再往上走
發現是通過 updateDOMListeners 再網上
發現是通過invokeCreateHooks再網上
發現是通過createElm再網上
發現是通過 patch(不一定是在更新的時候哈，主要是因爲 data 變化的時候會觸發更新，和我測試的環境有關，一般情況到 createElm 就可以了)