vue的mixin的理解和应用场景

介绍

mixin作为功能模块的使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂。官方对mixin的定义

mixin（混入），提供了一种非常灵活的方式，来分发vue组件中的可复用功能。

其本质就是一个js对象，可以包含我们组件想要复用的任意功能和生命周期，如：data、created、methods、computed等等。

使用

局部混入

// 新建 mixin.js
let myMixin = {
	created: function() {
		this.hello()
	},
	methods: {
		hello: function() {
			console.log('hello myMixin')
		}
	}
}


// 需要混入的index.vue文件
import myMixin from '@/mixin'
export default {
	mixins: [myMixin],
	data () {
		return {
			...
		}
	}
}
// 打开控制台就能看到 hello myMixin

全局混入

全局混入常用于插件的编写，它会影响到每一个组件实例，包括第三方组件，因为它是最所有vue实例作用的。

// main.js
let myMixin = {
	...
}

new Vue({
	i18n,
	router,
	mixins: [myMixin],
	render: h => h(App)
}).$mount('#app')

注意

• 当组件存在与mixin对象相同的选项的时候，混入的时候组件的选项会覆盖mixin的选项
• 如果相同选项为生命周期钩子的时候，混入的时候会合并成一个数组，先执行mixin的钩子，再执行组件的钩子

// 新建 mixin.js
let myMixin = {
	created: function() {
		console.log('mixin created')
		this.hello()
	},
	methods: {
		hello: function() {
			console.log('hello myMixin')
		}
	}
}


// 需要混入的index.vue文件
import myMixin from '@/mixin'
export default {
	mixins: [myMixin],
	data () {
		return {
			...
		}
	},
	created() {
		console.log('index created')
		this.hello()
	},
	methods: {
		hello() {
			console.log('hello index')
		}
	}
}
// 结果顺序为
// mixin created
// hello index
// index created
// hello index

这里组件的相同选项就是methods中的hello方法，组件的同名方法覆盖了mixin中的方法
生命周期都执行了，执行顺序是mixin、组件自身的生命周期