Vue中extend,extends,minxin,minxins的用法和区别

前言

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

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 组合就派上用场了。

extends

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

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

控制台输出

Vue.mixin和minxins

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 from './mixin2'; // 引入mixin文件
import extend from './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”

由此可见

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

参考链接

Vue中extend,extends,minxin,minxins的用法和区别