其实,Mixin并不是Vue专属的,可以理解成一种思想,翻译过来就是 混入 的意思。在很多框架里其实都有Mixin(混入)
对于Mixin而言,官方解释为:
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的 可复用功能。 一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
如果要用大白话解释的话,就是 我们可以将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。这样做的好处是,可以减少代码冗余并使得后期维护更容易。
Mixin的定义
定义mixin其实很简单,因为它就是一个对象而已,只不过它可以包含Vue组件的一些常见配置,比如data、method或是钩子函数等等。
定义mixin.js
let mixin = {
created() {
console.log("我是mixin里面的created!")
},
methods: {
hello() {
console.log("hello from mixin!")
}
}
}
export default mixin
组件中使用mixin
<template>
<div class="home">
<span>This is a Home page</span>
</div>
</template>
<script>
import myMixins from "../mixins";
export default {
name: 'Home',
mixins: [myMixins],
mounted(){
this.hello() //在该组件中并没用定义hello方法,使用的是混入中的hello
}
}
</script>
由于在Vue2时,没有组合式API这一说法,所以mixin可能会更好解决很多问题。但是到了Vue3,这种方式已经不被推荐了
![](https://i-blog.csdnimg.cn/blog_migrate/afa30cebfcdb0de93654955261e856c2.png)
如果硬要用也是可以的,例如
let mixin = {
methods:{
hello(){
console.log("Hello Mixin");
}
}
}
export default mixin
<template>
<div class="home">
<h1>This is a Home Page</h1>
<button @click="test">Mixin</button>
</div>
</template>
<script>
import {getCurrentInstance} from 'vue'
import MyMixin from '../mixin'
export default {
name: "HomePage",
mixins: [MyMixin],
setup(){
const {proxy} = getCurrentInstance()
const test = () => {
proxy.hello()
}
return {
test
}
}
}
</script>
最后就是公共的mixin定义好以后,可以根据不同的业务场景,能分为两种:局部混入和全局混入。
局部混入的话,和组件的按需加载是差不多的,需要用的再引入
全局混入的话,代表在项目的任何组件中都可以使用mixin
总结:
mixin中的生命周期函数会和组件的生命周期函数一起合并执行
mixin中的data数据在组件中也可以使用
mixin中的方法在组件内部可以直接调用
生命周期函数合并后执行顺序:先执行mixin中的,后执行组件的