一、写在前面

学Vue的过程中，一直搞不清mixin是个啥，今天准备写篇博客实践和总结一下。

Vue官方是这样定义的：

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

二、Mixin解密

Mixin是一种在Vue组件中重用代码逻辑的方式。它允许我们将一组可复用的选项（如数据、方法、生命周期钩子等）封装成一个对象，并在多个组件中进行混合使用。通过使用Mixin，我们可以实现代码的共享和复用，避免代码冗余，提高代码的可维护性和可读性。

具体来说，我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来。

三、实践

在开发过程中，我们经常会遇到在不同组件中复用代码的情况，这个时候我们就可以使用Vue的Mixin功能将相同或者相似的代码抽离出来。

小小实践下：

比如在项目中我们现在需要定义一个Dialog对话框组件和Tips提示组件，并且他们都是通过isDisplay来控制组件的显示

（1）Dialog组件

const Dialog = {
    template: '#Dialog', 
    data() { 
        return { 
            isDisplay: false 
        } 
    }, 
    methods: { 
        isShow() { 
            this.isDisplay = !this.isDisplay; 
            } 
        } 
    }

（2）Tips组件

const Tips = {
    template: '#Tips', 
    data() { 
        return { 
            isDisplay: false 
        } 
    }, 
    methods: { 
        isShow() { 
            this.isDisplay = !this.isDisplay; 
            } 
        } 
    }

可以看出，Dialog组件和Tips组件他们两者功能实现的代码是一样的，这时候我们就可以利用Mixin抽出相同的代码，来实现该逻辑功能。

（3）利用Mixin实现

const componentDisplay = {
    data() { 
        return { 
            isDisplay: false 
        } 
    }, 
    methods: { 
        isShow() { 
            this.isDisplay = !this.isDisplay; 
            } 
        } 
    }

然后在两个组件上引入Mixin进行使用

const Dialog = {
   template: '#dialog',
   mixins: [componentDisplay]
 }
 
 const Tips = {
   template: '#tips',
   mixins: [componentDisplay]
 }

四、总结

Mixin 使我们能够为 Vue 组件编写可插拔和可重用的功能。
如果希望在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则可以将其编写为 mixin，并在组件中简单的引用它。
然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优化于组件自已的 hook。

Vue mixin ：重用代码逻辑的强大工具