前言

今天接手公司的一个vue的项目，发现项目中有个mixins属性，我发现之前的项目中都没有发现过这个属性。查阅了官方文档并进行了总结。
vue-mixins与父子组件还是有很大的区别的。

组件与mixins区别

组件：
父组件 + 子组件 >>> 父组件 + 子组件
mixins：
父组件 + 子组件 >>> new父组件

使用方法

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() // -> "hello from mixin!"

以上可以看到混合后的组件能够非常自然的执行，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();
    })
  }
})

这样就避免了两次的初始化操作。