vue2-mixin的定义与和使用

文章目录

[1. 什么是mixin](#1. 什么是mixin)
[2. 局部混入](#2. 局部混入)
[3. 全局混入](#3. 全局混入)
[4. 多mixin混入冲突](#4. 多mixin混入冲突)
- [4.1 替换性](#4.1 替换性)
- [4.2 合并型](#4.2 合并型)
- [4.3 合并队列型](#4.3 合并队列型)
- [4.4 叠加性](#4.4 叠加性)
[5. 使用场景](#5. 使用场景)

#vue2-mixin的使用

1. 什么是mixin

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

2. 局部混入

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

js 复制代码

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

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

js 复制代码

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

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

3. 全局混入

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

js 复制代码

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来控制是否显示

js 复制代码

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

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

js 复制代码

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

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

js 复制代码

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

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

js 复制代码

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