一、vue2中的逻辑复用Mixins

vue中 Mixins(混入)对于逻辑复用具有一定意义,可以包含任意的组件选项，当组件使用混入对象的选项时，组件将混入Minxins所有选项，通俗来说，Minxins抛出了一个包含data、method、created等选项的对象，当组件使用该Mixins时，这些选项将按照一定规则合并到本身选项中。
使用范例：
（1）创建一个混入对象

![ID2JS~8$6Q{PRD1_NNHW4]V.png](p3-juejin.byteimg.com/tos-cn-i-k3…)

export default{
    data(){
        return{
            name:'小明'
        }

    },
    created(){
        console.log('这是从mix页面输出')
        console.log('这是从mix页面输出2')
    },
    mounted(){
        console.log('这是从mix页面mounted输出')
        console.log('这是从mix页面mounted输出2')
    },
    methods:{
        test(){
            console.log('from mixins')
        }
    }
    },
}

（2）组件内引入

![NPSQLTIX}E8MK7MOOL88S3.png

<script>
import test from '../../mixins/test.js'
    export default {
        mixins:[test],
        data(){
            return{
                age:18
            }
        },
        created(){
            console.log(this.name)
            console.log('这是从测试页面输出')
               this.test()
        },
        mounted(){
            console.log('这是从测试页面mounted输出')
            console.log('这是从测试页面mounted输出2')
        },
       
        }
    }
</script>

（3）执行结果

可以看到Mixins输出语句全部执行，并且Mixins中的输出执行要早于组件内。Mixins的使用还是非常简单的，那么它混入组件的规则是哪些呢？

1.值为函数的选项，如created，mounted等，会直接合并，并且Mixins中钩子函数的执行要早于组件内

在上面的执行结果来看，我们在Mixins钩子函数created以及mounted，会与组件内的钩子函数合并，并且Mixins执行时间要早于组件内部执行时间

2.值为对象的选项，如methods，会进行合并，但如果方法名冲突，组件内方法将覆盖Mixins中的方法，如图：

![ID2JS~8$6Q{PRD1_NNHW4]V.png](p6-juejin.byteimg.com/tos-cn-i-k3…)

我们同时定义了两个test方法，最终执行的是组件内的方法

3.Mixins方法和参数在组件间不共享

也就是说不同组件混入Mixins，Mixins都是以初始值身份混入。组件1改变了Mixins中的data时，组件2混入时，Mixins的data还是最初的初始值。

二、vue3组合API的替代

在vue2中我们的组件使用选项式API，使用对象定义方式实现组件，使用data、methods等属性定义我们所需功能，但Mixins在实际使用中却存在许多问题，丹·阿布拉莫夫曾在《mixin被认为是有害的》认为使用mixin进行逻辑重用是一种反模式。
mixin有很多问题，例如命名问题、组件改动问题、数据属性组件与mixin定义问题即所谓隐式依赖
使用mixin最头痛的莫过于命名问题，如果一段逻辑不能在多个组件之中进行复用，那么也就没有提取的必要，但恰恰是多个组件的复用就会有命名问题，我们知道混入规则中，如果值为对象的选项，命名冲突时组件内方法将会覆盖混入方法，这使得我们在多个组件复用时，编写代码更为困难，同时如果一旦改动mixin中的代码，那么引用并混入的所有组件都会受到影响，可谓牵一发而动全身。

vue3中使用Composition API进行类似于react hook式的函数式组件开发，替代了mixinx，能更好的进行逻辑代码提取及复用，其思想是将功能定义为从setup函数返回的变量，而不是像vue2中将功能定义为对象属性。

mixin使用合并对象属性的方式进行逻辑的复用是基于vue2类组件开发下的一种模式，而如今函数式组件开发成为主流，而vue3 组合式API也很好的解决了mixin的缺点，使得逻辑代码复用性更强。