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方法