Vue.mixin Vue.extend(Vue.component)的原理与区别

1.本文将讲述 方法 vue.extend vue.mixin 与 new vue({mixins:[], extend:{}})的区别与原理

     先回顾一下 vue.mixin 官网如下描述：

     vue.mixin( mixin )全局注册一个混入，影响注册之后所有创建的每个 vue 实例。插件作者可以使用混入，向组件注入自定义的行为。

     既然可以影响到注册后的所有实例，那么该方法注入的方法和属性都存放在哪里呢（构造函数的options属性上），我们一起来看看该方法的定义

     vue.mixin = function (mixin) {
             //mergeoption，将vue构造函数的options属性与传入的mixin参数进行合并，
             //合并之后再复制给vue构造函数的options属性
            this.options = mergeoptions(this.options, mixin);
            return this
        };

    为什么vue.mixin方法将mixin合并至vue.options就能影响注册之后的所有实例呢，让我们看看vue实例化的过程（将构造函数的options属性与实例化参数合并后付给实例的$options属性

）

　

 1    function vue(options) {
 2         //调用_init方法
 3         this._init(options);
 4     }
 5 
 6 
 7 
 8     vue.prototype._init = function (options) {
 9             var vm = this;
10             // a uid
11             vm._uid = uid$3++;
12 
13             var starttag, endtag;
14     
21             // a flag to avoid this being observed 标记该对象是一个vue实例
22             vm._isvue = true;
23             // merge options
24             if (options && options._iscomponent) { //组件实例化过程，即vue.extend返回对象--稍后解释
25                 // optimize internal component instantiation
26                 // since dynamic options merging is pretty slow, and none of the
27                 // internal component options needs special treatment.
28                 initinternalcomponent(vm, options);
29             } else {//将构造函数的options属性与实例化参数合并后付给实例的$options属性 ,该属性会在函数initstate中进行初始化
30                 vm.$options = mergeoptions(  
31                     resolveconstructoroptions(vm.constructor),
32                     options || {},
33                     vm
34                 );
35             }
36             /* istanbul ignore else */
37             {
38                 initproxy(vm);
39             }
40             // expose real self
41             vm._self = vm;
42             initlifecycle(vm);
43             initevents(vm);
44             initrender(vm);
45             callhook(vm, 'beforecreate');
46             initinjections(vm); // resolve injections before data/props
47             initstate(vm);
48             initprovide(vm); // resolve provide after data/props
49             callhook(vm, 'created');
50 
51             /* istanbul ignore if */
52             if ("development" !== 'production' && config.performance && mark) {
53                 vm._name = formatcomponentname(vm, false);
54                 mark(endtag);
55                 measure(("vue " + (vm._name) + " init"), starttag, endtag);
56             }
57 
58             if (vm.$options.el) {
59                 vm.$mount(vm.$options.el);
60             }
61         };

 

     vue.extend-- 使用基础 vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 

     该方法返回一个与vue具有相同功能的构造函数（其实为创建了一个组件）-属性options是 合并  基础 vue 构造器 与 extend的参数 的对象，

     

 vue.extend = function (extendoptions) {
            extendoptions = extendoptions || {};
            //将调用函数付给super 
            var super = this;  
            var superid = super.cid;
            //如果参数中参入与创建的构造函数则直接返回
            var cachedctors = extendoptions._ctor || (extendoptions._ctor = {});
            if (cachedctors[superid]) {
                return cachedctors[superid]
            }
            //获取组件的名称
            var name = extendoptions.name || super.options.name;
            if ("development" !== 'production' && name) {
                validatecomponentname(name);
            }
            //创建组件sub
            var sub = function vuecomponent(options) {
                this._init(options);
            };
　　　　　　　//为组件添加对应的属性与方法
            sub.prototype = object.create(super.prototype);
            sub.prototype.constructor = sub;
            sub.cid = cid++;
            //合并super的options与extend的入参并赋值给sub的options属性
            sub.options = mergeoptions(
                super.options,
                extendoptions
            );
            //在sub上保存super的信息
            sub['super'] = super;

            // for props and computed properties, we define the proxy getters on
            // the vue instances at extension time, on the extended prototype. this
            // avoids object.defineproperty calls for each instance created.
            if (sub.options.props) {
                initprops$1(sub);
            }
            if (sub.options.computed) {
                initcomputed$1(sub);
            }

            // allow further extension/mixin/plugin usage
            sub.extend = super.extend;
            sub.mixin = super.mixin;
            sub.use = super.use;

            // create asset registers, so extended classes
            // can have their private assets too.
            asset_types.foreach(function (type) {
                sub[type] = super[type];
            });
            // enable recursive self-lookup
            //如果有组件名称，将该组件挂载到sub.options.components上。以便可在组件内使用

          if (name) { sub.options.components[name] = sub; } // keep a reference to the super options at extension time. // later at instantiation we can check if super's options have // been updated.
             //保存option信息。以便在render的时候生成最新的options选项

            sub.superoptions = super.options;
            sub.extendoptions = extendoptions;
            sub.sealedoptions = extend({}, sub.options);

            // cache constructor
            cachedctors[superid] = sub;
            return sub  //返回sub构造函数
        };

      vue.component( id, [definition] ) 注册或获取全局组件。注册还会自动使用给定的id设置组件的名称，第二个参数可以是object也可以调用vue.extend 返回的构造函数,返回组件

 调用vue.component 将调用vue.extend生成一个组件（构造函数），该组件将赋值给vue.options.components[id]，由于在实例化时，将合并构造函数的options至实例对象的$options上，所有通过通过全局构造函数vue创建的组件或者视图都可以运用该组件,

 var asset_types = [
        'component',
        'directive',
        'filter'
    ];
//定义  vue.component .   vue.directive  vue.filter

asset_types.foreach(function (type) {
            vue[type] = function (
                id,
                definition
            ) {
                if (!definition) {
                    return this.options[type + 's'][id]
                } else {
                    /* istanbul ignore if */
                    if ("development" !== 'production' && type === 'component') {  
                        //对组件的命名规范进行验证
                        validatecomponentname(id);
                    }
                    if (type === 'component' && isplainobject(definition)) {
                       //如果第二个参数是一个object 调用  vue.extend(definition)生成一个构造函数   this.options._base === vue
                        definition.name = definition.name || id;
                        definition = this.options._base.extend(definition);
                    }
                    if (type === 'directive' && typeof definition === 'function') {
                        definition = { bind: definition, update: definition };
                    }
                    //将vue.options.components[id]赋值为 组件构造函数
                    this.options[type + 's'][id] = definition;
                    return definition
                }
            };
        });
    }

 

由以上代码可见  vue.component返回的组件即为  vue.extend创建的构造函数 -再次命名为subvue，subvue具有与vue一样的方法和属性，所以可调用subvue.component,subvue.extend创建组件，调用subvue.component,subvue.extend创建的组件组件将存放于subvue.options上，所以在通过subvue创建的组件，只能用于subvue实例化传入字符串模板的中模板使用，或者subvue.component,subvue.extend创建的组件实例化传入的字符串模板中使用。

   

   new vue({mixins:[], extend:{}})

     实例化选项mixins ， extend将在init函数中通过mergeoptions合并至实例属性$options,他们的区别是extend为options对象，mixins为options数组，同时 extend的方法将比mixins先执行，但他们都会在  vue.extend 与  vue.mixin之后  执行