本文共 2074 字，大约阅读时间需要 6 分钟。

Vue是基于组件开发的，如果组件中有很多复用的逻辑，那么就可以将这些逻辑放在mixin中。

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

全局使用mixin

mixin实际上类似于Object.assign()，如果全局注册，就会在每一个组件实例中进行属性的合并。

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

比如想在全局注册一个时间处理函数，可以在./src下建一个mixin.js，代码如下：

// main.jsimport moment from 'moment';export default {   	data() {   		return {   		}	},	computed: {   	},	methods: {   		$formatTime(t, template = "YYYY-MM-DD hh:mm:ss") {   			return t ? moment(t).format(template) : "";		}	}}

然后在main.js中全局注册mixin，代码如下：

import Vue from 'vue'import App from './App'import router from './router'import store from './store'import plugin from '@/utils/plugin';import $ from 'jquery';import mixins from './mixins.js';// import '@babel-polyfill'Vue.config.productionTip = falseVue.use(plugin);Vue.mixin(mixins);new Vue({     el: '#app',  router,  store,  render:h => h(App)}).$mount('#app')

局部使用mixin

所以一般情况下在需要的时候进行混入就行了。同样也是先定义一个main.js文件，代码如下：

export default {   	data() {   		return {   		}	},	computed: {   	},	methods: {   		$defectTransfer(id, type, state) {   			const map = {   			 	MinderDemand: "需求",		    	MinderTask: "任务"		    }		    let msg = map[type];		    			api.bug.bugToOther(id, type)            .then(() => {                 this.$message.success(`缺陷转${     msg}成功`);            })            .catch((err) => {                 this.$message.error(err);            })		}	}}

在Vue文件中引入mixin，代码如下：

个人觉得局部使用mixin会造成指向不明的问题，对后期维护不利。比如新来了一个同事，看到项目里面有一个$defectTransfer的方法，以为是全局注册的，然后在别的地方用，结果发现不行，找了很久才发现这个方法定义在一个局部使用的mixin里面。

如果要局部使用，本人觉得还是下面的方法可维护性更好。

还是定义一个utils.js的文件，代码如下：

const func = {   };func.$defectTransfer = function() {   	const map = {   	 	MinderDemand: "需求",    	MinderTask: "任务"    }    let msg = map[type];    	api.bug.bugToOther(id, type)    .then(() => {         this.$message.success(`缺陷转${     msg}成功`);    })    .catch((err) => {         this.$message.error(err);    })}export func

然后这样使用：