vue源码学习(一)实例方法 / 事件

vue源码版本为2.6.11(cdn地址为: https://lib.baomitu.com/vue/2.6.11/vue.js)

vue源码里有这样一段代码:

vue源码学习(一)实例方法 / 事件_第1张图片

其中定义了Vue构造函数,然后依次调用initMixin、stateMixin、eventsMixin、lifecycleMixin、renderMixin方法,并将Vue构造函数作为参数。

注: this instanceof Vue 用于判断this是否是Vue对象构造函数的实例。

我们来看 initMixin方法:

    function initMixin (Vue) {
      // 在Vue prototype上拓展_init方法
      Vue.prototype._init = function (options) {
        // 缓存当前的上下文到vm变量中
        var vm = this;
        // a uid
        // 设置_uid属性(一开始为0,该属性是唯一的)
        // 当触发init方法,新建Vue实例时(当渲染组件时也会触发)uid都会递增。
        vm._uid = uid$3++;
          
        // 下面这段代码主要是用来测试代码性能的,在这个时候相当于打了一个"标记点"来测试性能。
        var startTag, endTag;
        /* istanbul ignore if */
        if (config.performance && mark) {
          startTag = "vue-perf-start:" + (vm._uid);
          endTag = "vue-perf-end:" + (vm._uid);
          mark(startTag);
        }
  
        // a flag to avoid this being observed
        // 加上标识防止this被observed
        vm._isVue = true;
        // merge options
        if (options && options._isComponent) {
          // 当前这个Vue实例是组件,则执行initInternalComponent方法
          // 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 {
          // 当前Vue实例不是组件,而是实例化Vue对象时,调用mergeOptions方法
          vm.$options = mergeOptions(
            resolveConstructorOptions(vm.constructor),
            options || {},
            vm
          );
        }
        /* istanbul ignore else */
        {
          initProxy(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 (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);
        }
      };
    }

如果传入值的_isVue为ture时(即传入的值是Vue实例本身)不会新建observer实例(这里可以暂时理解新建observer实例就是让数据响应式)。 

vue源码学习(一)实例方法 / 事件_第2张图片

你可能感兴趣的:(vue)