Hello大家周末好，今天有时间在这里给大家讲一下mixins的使用方法和注意的地方。

一：mixins（混入）是什么？？？

   混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。（我的理解是写生命周期的封装方法。。。。）

二：基本例子

    项目结构：HelloWorld.vue是父组件    mixins/index.vue是混入组件
    HelloWorld.vue：组件
      <template>
			  <div>
			    <button @click="submit">点击我</button>  //这里组件本身submit方法是注释掉            的所以打印是“我是混入组件的方法”
			  </div>
			</template>
			<script>
			import mix from "./mixins";
			export default {
			  mixins: [mix],   //混入组件的使用
			  data() {
			    return {};
			  },
			  methods: {
			    // submit() {   组件自己本身如果没有这个方法的时候回调用混入的方法
			    //   console.log("我是组件本身的方法");
			    // }
			  }
			};
			</script>

       mixins/index.vue：
       <script>
			export default {
			  methods: {
			    submit() {
			      console.log("我是混入组件的方法");
			    }
			  }
			};
			</script>

三：混入组件的生命周期

    在上面代码的基础上都加上create和mounted:  
       created() {
 	      console.log("我是组件本身的created函数 || 我是混入的created函数");
		},
	    mounted() {
	      console.log("我是组件本身的mounted函数 || 我是混入的mounted函数");
		  },

输出结果：

结论：同一个生命周期混入组件会在普通组件出发生命周期前调用（谨慎在混入组件中写生命周期）

四：选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

  在HelloWorld的data中添加   message: 'hello',   foo: 'abc'     //值
  在mixins/index中添加 message: "goodbye",bar: "def" //注意看不同key和相同的key
  输出this.$data

官网地址：https://cn.vuejs.org/v2/guide/mixins.html
demo github地址：https://github.com/Liingot/mixins