其实，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，这种方式已经不被推荐了

如果硬要用也是可以的，例如

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中的，后执行组件的

Vue中的mixin

Mixin的定义

猜你喜欢