Vue中的mixin混入
文章目录
简介
混入（mixin）提供了一种非常灵活的方式，来分发 Vue
组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
功能
可以把多个组件共用的配置提取成一个混入对象
可以理解是：Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载在Vue实例上，给我们的偷懒带来方便；
mixin存在的问题
- 变量来源不明，不利于代码的阅读；
- 使用多个Mixin可能会造成命名冲突；
- Mixin和组件可能会出现多对多关系，复杂度较高；
混入特性
mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
mixin混入对象值为函数（例如：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed）的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
mixin混入对象值为对象（例如：props,data,methods,components）的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖
总结
mixin： 将多个组件相同的逻辑，抽离出来复用；
使用mixin混入data： 组件 data 优先级高于 mixin混入的 data;
使用mixin混入钩子： 先执行 mixin的钩子，再执行组件里的钩子；
使用mixin混入方法: 组件 methods方法 优先级高于 mixin混入的 methods方法；
使用mixin混入自定义属性： 组件自定义属性优先级高于 mixin混入的 自定义属性；
修改优先级： 配置app.config，使用optionMergeStrategies属性修改优先级；
局部mixin： 局部Mixin和局部组件的用法类似，局部mixin在使用时，需要使用mixins声明；
全局mixin： 全局mixin类似于全局组件，默认注入每一个组件里，直接可用；
部分特性详解
定义混入
const mixin = {
data(){
....},
methods:{
....}
}
使用混入两种方法
全局混入：Vue.mixin(xxx)
举个栗子
import mixin from './mixins';
Vue.mixin(mixin)
局部混入：mixins:[‘xxx’]
组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先。
var mixin = {
data: function () {
return {
message: 'hello',
name: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data () {
return {
message: 'minxxxxxxx',
top: 'asd'
}
},
created () {
console.log(this.$data)
// log{ message: "minxxxxxxx", name: "abc", top: "def" }
}
})
结论：组件 data 优先级高于 Mixin 混入的 data
同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
结论：先执行 Mixin 的钩子，再执行组件里的钩子
使用Mixin混入方法
var mixin = {
methods:{
handleClick(){
console.log("mixin handleClick");
}
},
}
new Vue({
mixins: [mixin],
methods:{
handleClick(){
console.log("handleClick");
}
},
})
// => "handleClick"
结论：组件 methods方法 优先级高于 Mixin 混入的 methods方法