vue2-mixin的定义与和使用

#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]
}