（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的）
首先介绍一下混入mixin的概念：
官方文档：混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
个人理解：混入就是用来对vue组件中的公共部分，包括数据对象、钩子函数、方法等所有选项，进行提取封装，以达到代码的复用。
接下来通过一个简单的例子看看混入的基础用法：
首先新建一个mixin.js文件，添加以下代码。
let mixin = {
data() {
return {
msg: 'hello mixin'
}
},
created() {
console.log('混入的钩子函数');
},
methods: {
show() {
console.log(this.msg);
}
}
}
export default mixin;然后新建一个index.vue文件，添加以下代码。
<template>
<div id="myVue">
<span @click="show">{{msg}}</span>
</div>
</template>
<script>
import myMixin from './mixin.js';
export default {
name: 'myVue',
mixins: [myMixin],
created() {
console.log('组件自身的钩子函数');
}
}
</script>
注意：在index.vue文件中要先引入mixin.js文件，然后就可以直接使用mixin.js中定义的数据msg和方法show。
而对于混入对象以及组件自身的created钩子函数呢，它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。
如果组件自身定义了与钩子对象中同名的数据或方法，为了避免冲突，vue将优先使用组件自身的数据或方法。
当然也可以将混入对象全局注册，在之后新建的所有vue组件中就都可以使用。
接下来分享一下全局混入的注册方法。
方法一：在工程的main.js中直接注册，实现如下：
import Vue from 'vue';
import App from './App'; Vue.mixin({
created() {
console.log('全局混入的钩子函数');
}
}); /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
方法二：模块化注册，新建mixin.js文件并添加以下代码：
export default {
install(Vue) {
Vue.mixin({
created() {
console.log('全局混入的钩子函数');
}
})
}
}然后在main.js中引入该文件并使用use方法进行注册
import Vue from 'vue';
import App from './App';
import myMixin from './mixin.js'; Vue.use(myMixin); /* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});