前言
今天接手公司的一个vue的项目，发现项目中有个mixins属性，我发现之前的项目中都没有发现过这个属性。查阅了官方文档并进行了总结。 官方文档: mixins vue-mixins与父子组件还是有很大的区别的。
组件与mixins区别
组件： 父组件 + 子组件 >>> 父组件 + 子组件 mixins： 父组件 + 子组件 >>> new父组件
使用场景
当两个组件存在相同的方法，例如需要进行初始化，例如分页操作，进入页面时，需要对页面初始化页面。这个时候你可以选择传统的写组件来进行分离，但是使用mixins可以不通过状态传递，直接进行强大的混合，方便了许多。 mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，
使用方法
1.基础用法
var myMixin = {
created:
function () {
this.hello()
},
methods: {
hello:
function () {
console.log(
'hello from mixin!')
}
}
}
var Component = Vue.extend({
mixins: [myMixin]
})
var component =
new Component()
以上可以看到混合后的组件能够非常自然的执行，mixins组件里的函数。
2.选项合并
var mixin = {
created:
function () {
console.log(
'混合对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created:
function () {
console.log(
'组件钩子被调用')
}
})
对于有冲突的代码，这里可以分为两个情况，如果是vue生命周期里的钩子函数，那将会进行合并，以此执行mixins以及组件的函数；如果是methods等方法，（不是钩子函数）那组件中的方法将会覆盖mixins中的方法。
3.合并策略中的问题
var mixin = {
created:
function () {
this.init ()；
},
methods: {
init (){
}
}
}
new Vue({
mixins: [mixin],
created:
function () {
console.log(
'组件钩子被调用')
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.init();
})
}
})
像这样我们希望路由进入的时候在进行初始化，盲目的进行混合就会使得初始化两次。
4.解决办法
var mixin = {
created:
function() {
let option =
this.$options.doNotInit
if (!option) {
this.init();
}
},
methods: {
init (){
}
}
}
new Vue({
mixins: [mixin],
doNotInit:
true,
created:
function () {
console.log(
'组件钩子被调用')
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.init();
})
}
})
这样就避免了两次的初始化操作。
参考： http://www.sohu.com/a/153785407_464084 http://www.deboy.cn/Vue-mixins-advance-tips.html
