Vue-mixin当我们的代码需要用到大量重复的data、methods、钩子函数时，采用mixin是一种很好的方式，它

基础概念

当我们的代码需要用到大量重复的data、methods、钩子函数时，采用mixin是一种很好的方式，它可以帮助我们节省代码量。而且mixin能够智能与我们的选项代码相融合。假设我们有重复的data时，就会以主要组件代码为优先级，也就是说，组件代码可以覆盖混入的代码。

写法

一般我们开发时使用方式为先定义一个mixin.js文件

// mixin.js
const mixinObj={
  data(){
    return {
      n:1
    }
  },
  methods:{
    add(){
      this.n+=1
    }
  }
}
export default mixinObj // 导出

然后通过引入到组件上的方式来使用

//main.js
<template>
  <div id="app">
    <button @click="add">点击</button>
    {{ n }}
  </div>
</template>

<script>
import mixinObj from "./mixin.js";  //  引入
export default {
  mixins: [mixinObj], //引入后使用
  data() {
    return { n: 100 };
  }
};
</script>

上面的代码我在mixin.js文件中定义了一个方法和一个属性n，在混入到main.js文件时，n会被main.js中的n覆盖。但是methods由于在组件文件main.js中并没有被使用，所以不会被覆盖，依然可以使用。

自定义选项合并

上面是使用简单覆盖的方式，也就是简单地覆盖mixin里面的值，如果说我们需要自定义，vue同样也给我们创造了这样的api，可以看这篇

自定义选项合并策略

全局混入

仅仅需要注意的时，官方文档也不支持全局混入的方式，因为它会影响已有数据对象，所以我们最好不使用这种方式，如果真的要用，就参考官方文档即可。