vue源码学习过程分析

创建Vue函数过程

1. Vue创建过程

function Vue(options) {
    console.log("执行Vue创建函数")
    if (!(this instanceof Vue)
    ) {
      // 当Vue 函数未直接New 时执行代码
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

执行vue是否属于Vue实例的判断，让其必须通过New 的形式创建Vue实例才能使用。

2. Vue初始化过程。

  function initMixin(Vue) {
    Vue.prototype._init = function (options) {
      var vm = this;
      console.log(this)
      // 生成唯一标识用来区分不同的Vue实例Id
      vm._uid = uid$3++;

      var startTag, endTag;
      /* istanbul ignore if */
      // mark 是Vue性能检测的函数方法 默认使用的是 window.Performance 来监听Vue生成到页面上的时间
      if (config.performance && mark) {
        startTag = "vue-perf-start:" + (vm._uid);
        endTag = "vue-perf-end:" + (vm._uid);
        // 打一个起始时间的tag值记录vue的Uid值
        mark(startTag);
      }

      // a flag to avoid this being observed
      vm._isVue = true;
      // 合并数据 当是组件选项时将数据合并到子组件上
      if (options && options._isComponent) {
        // 优化组件合并
        // 因为动态选项合并非常慢
        // 当他是组件时需要做特殊处理.
        initInternalComponent(vm, options);
      } else {
        // 处理数据的混入合并 例如将chiren 对象 和当前对象的生命周期等函数的合并操作
        vm.$options = mergeOptions(
          resolveConstructorOptions(vm.constructor),
          options || {},
          vm
        );
      }
      /* istanbul ignore else */
      {
        // 代理 用于错误收集
        initProxy(vm);
      }
      // expose real self
      vm._self = vm;
      // 初始化生命周期
      initLifecycle(vm);
      // 初始化事件
      initEvents(vm);
      // 开始初始化render需要的数据
      initRender(vm);
      // 调用生命周期函数
      callHook(vm, 'beforeCreate');
      // 初始化inject 提供的函数
      initInjections(vm); // resolve injections before data/props
      // 初始化State
      initState(vm);
      // 初始化provide提供的参数
      initProvide(vm); // resolve provide after data/props
      // 调用钩子函数
      callHook(vm, 'created');

      /* istanbul ignore if */
      if (config.performance && mark) {
        vm._name = formatComponentName(vm, false);
        // 打点
        mark(endTag);
        measure(("vue " + (vm._name) + " init"), startTag, endTag);
      }
      // 挂载数据如果存在Dom元素的绑定的位置
      if (vm.$options.el) {
        vm.$mount(vm.$options.el);
      }
    };
  }

在源码中发现，vue这个对象一步步的加载数据和变量并一步步的执行了挂载操作，并使用window.Performance来统计代码的性能。