vue2-mixin的定义与和使用

1. 什么是mixin

• Mixin是面向对象语言中的一个类，提供了方法的实现，其他类可以访问mixin类的方法而不用继承
• Mixin类通常作为功能模块使用，在需要该功能的地方进行混入，有利于代码复用，又避免了多继承的复杂
• 在Vue中，Mixin的官方定义是：提供了一种非常灵活的方法，来分发Vue组件中的可复用功能
• 本质就是一个js对象，可以包含组件中的任意功能选项，data，components，methods，computed，watch，钩子函数等
• 我们只要在mixin中声明好功能选项，当组件使用mixins对象时，所有的mixin对象的选项豆浆被混入该组件本身的选项中来
• 可以分为局部混入和全局混入

2. 局部混入

• 定义一个mixin对象，有组件data，methods

const myMixin={
    created(){
        this.sayHello()
    },
    methods:{
        sayHello(){
            console.log('hello')
        }
    }
}

• 在其他组件中，通过mixins属性调用mixin对象

Vue.component('ComponentA',{
    mixins:[myMixin]
})

• 该组件使用时，混合了mixin里面的方法

3. 全局混入

• 通过Vue.mixin()进行全局混入

Vue.mixin({
    created(){
        console.log('global Mixin')
    }
})

• 使用全局混入时，会影响到每一个组件的实例，包括第三方组件
  ** 当组件存在和mixin对象相同的选项的时候，进行地柜合并的时候徐建的选项会覆盖mixin的选项，但是如果是钩子函数，会合并成一个数组，先执行mixins的钩子函数，再执行组件的钩子函数

4. 多mixin混入冲突

• 就是如果我们在多个mixin里面里面重复定义了功能该怎么处理

4.1 替换性

• 如果是props，methods，inject，computed会被后来者替换

4.2 合并型

• 如果是data则合并

4.3 合并队列型

• 如果是生命周期函数和watch，按照合并顺序依此执行

4.4 叠加性

component，directives，filters等会通过原型链进行叠加

5. 使用场景

• 我们定义一个弹窗modal，通过ifShow来控制是否显示

const Modal={
    template:'#modal',
    data(){
        return{
            ifShow:false
        }
    },
    methods:{
        toggleSHow(){
            this.ifShow=!this.ifShow
        }
    }
}

• 然后我们同事还需要一个提示框tip，通过ifShow来控制是否显示

const Tip={
    template:'#tip',
    data(){
        return{
            ifShow:false
        }
    },
    methods:{
        toggleSHow(){
            this.ifShow=!this.ifShow
        }
    }
}

• 我们观察发现，两个逻辑是相同的，代码控制也是相同的，这时候就可以把相同的部分抽象为一个mixin

const toggle={
    data(){
        return {
            ifShow:false
        }
    },
    methods:{
        toggleShow(){
            this.ifShow=!this.ifShow
        }
    }
}

然后再两个组件上，只需要引入mixin

const Modal={
    template:'#modal',
    mixins:[toggle]
}
const Tip={
    template:'#tip',
    mixins:[toggle]
}