前言

初学vue。extend，extends，minxin，minxins一直没怎么了解清楚，经过大量的查阅后，总结出以下几点，有什么错误的话请大佬指正。

1.Vue.extend

官方Vue.extend解释

Vue.extend是一个全局的API，实际是创建一个构造器，并将其挂载到HTML的元素上(创建一个template标签)。可以通过propsData传参。

    <h1>Vue.extend</h1>
    <hr>
    <div id="element">
        <h1>Hello!</h1>
    </div>
    <hr>
    <author></author>
    <hr>
    <div id="transmit"></div>

注意：被挂载的元素内的内容会被覆盖

    var Profile1 = Vue.extend({
    template: '<p>My name is {{Name}}</p>',
    data: function () {
        return {
        Name: 'ElucidatorSky'
        }
      }
    })
    // 输出 Profile1 实例，在控制台输出为VueComponent{}
    console.log(new Profile1());
    // 创建 Profile1 实例，并挂载到一个元素上。
    new Profile1().$mount('#element')

    var Profile2 = Vue.extend({
        template:"<p>{{Name}}</p>",
        data:function(){
            return{
                Name:'ElucidatorSky'
            }
        }
    });   
    // 创建 Profile2 实例，并挂载到一个元素上。
    new Profile2().$mount('author');

    var Profile3 = Vue.extend({
        template: '<p>{{extendData}}</br>实例传入的数据为:{{propsExtend}}</p>',
        data: function () {
            return {
            extendData: '这是extend扩展的数据',
            }
        },
        props:['propsExtend']
    })
    // 创建 Profile 实例，并挂载到一个元素上。可以通过propsData传参.
    new Profile3({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#transmit')

运行后

为什么使用 extend

在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去，相比 extend 要更省心一些。但是这样做会有几个缺点：

组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？ 所有内容都是在 #app下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert()提示组件要求像调用 JS 函数一样调用它，该怎么办？ 这时候，Vue.extend + vm.$mount 组合就派上用场了。

2.extends

官方extends解释

extends是一个选项，主要是为了便于扩展单文件组件。只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件

// extends示例
var CompA = { 
            created:function(){
                console.log("我是被扩展出来的");
                }
            }
extends: CompA

控制台输出

3.Vue.mixin和minxins

官方Vue.mixin解释

Vue.mixin即是混入。mixin的作用是多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用，在已有的组件数据和方法进行了扩充。Vue.mixin()可以把你创建的自定义方法混入所有的 Vue 实例（就是所有添加的组件都会混入你自定义的方法）。

// mixins示例        
//全局混入
Vue.mixin({
    created:function(){
        console.log('我是全局被混入的');
    }
})
var mixin = {
  created: function () { console.log('我是外部被混入的') }
}
var app = new Vue({
// 局部混入
  mixins: [mixin]
})

mixins的特点:方法和参数在各组件中不共享

混合对象中的参数num

export default {
    data() {
        return {
            num: 1,
        }
    },
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('hello form mixinIn')
        }
    }
}

组件1中的参数num进行+1操作

<template>
  <div class="template1">
      <p><button @click="addone">组件1</button></p>
      template1里的num:{{num}}
  </div>
</template>

<script>
import mixinIn from '../assets/mixinIn'
export default {
    mixins: [mixinIn],
    methods:{
        addone(){
            this.num++
        }
    }
}
</script>

组件2中参数进行+2操作

<template>
  <div class="template1">
      <p><button @click="addtwo">组件2</button></p>
      template2里的num:{{num}}
  </div>
</template>

<script>
import mixin from '../assets/mixinIn'
export default {
    mixins: [mixin],
    methods:{
        addtwo(){
            this.num+=2
        }
    }
}
</script>

组件1,组件2里的num互不受影响

mixin和extends都可以在外部创建js文件，通过import来引用//全局引用mixin
import mixin1 from './mixin1'
import Vue_extend from './Vue_extend'
var Profile1 = Vue.extend(Vue_extend)
new Profile1().$mount('#app')
Vue.mixin(mixin1)
//局部引用mixin
import mixin2 './mixin2'; // 引入mixin文件
import extend './extend'; // 引入mixin文件
export default {
   mixins: [mixin2],
   extend: extend
}

他们之间的区别

import Vue from 'vue'
import mixin1 from './assets/mixin1'
import mixin2 from './assets/mixin2'
import Vue_extend from './assets/Vue_extend'
import extend from './assets/extend'
var Profile1 = Vue.extend(Vue_extend)
Vue.mixin(mixin1) // 先混入
new Profile1().$mount('#app')  // 再挂载 先挂载则全局混入不进去
export default {
  name: 'App',
  mixins:[mixin2],
  extends: extend,
  created() {
      console.log("我是原生app的")
  }
}

mixin1.js

export default {
    created() {
        console.log('我是全局混入的mixin1')
    }
}

mixin2.js

export default {
    created() {
        console.log('我是局部混入的mixin2')
    }
}

extend.js

export default {
    created() {
        console.log('我是局部扩展的')
    }
}

Vue_extends.js

export default {
    created() {
        console.log('我是全局扩展的')
    }
}

结果

我们可以看出，全局的mixin1混入了挂载的Vue_extend和扩展的extend上先调用混入挂载上的mixin1：“我是全局混入的mixin1”

然后输出挂载的Vue_extend：“我是全局扩展的”

之后输出混入到原生app上的mixin1： “我是全局混入的mixin1”

再输出混入到extend里的mixin1： “我是全局混入的mixin1”

然后输出extend扩展的：“我是局部扩展的”

再输出局部混入的mixin2：“我是局部混入的mixin2”

最后输出原生app的：“我是原生的app”

由此可见

1. extend会被Vue.mixin混入
2. 若组件被混入，混入的先执行
3. 执行顺序：Vue.extends > 原生app混入的Vue.mixin > extends > mixins > 原生app

参考文章

火狼1 vue中extend,mixins,extends,components,install的几个操作

技术胖 vue视频教程