最近刚开始做前端，用vue写了几个管理页面，结构都类似。但是我的问题是突然发现好多东西都冗余了，这让我很难受，感觉其实代码就是那些，粘贴的可以说是很频繁，但是又没办法。这我就让我发现mixin语法。

mixin初体验

首先是建立了一个js文件，我建在了src/mixin里面，在文件里面可以进行data，methods，created这样的写法。

export default {
  created() {
    console.log("this is mixin Created!")
    this.getList();
  },
  methods: {
    getList() {
      console.log("getList", this.queryInfo)
    }
  }
}

局部混入

之后怎么在另一个.vue文件中引入这些文件呢？答：只需在mixins里面传入对应数组就好了！

<script>
import mixinCommon from "@/mixin/common";
    export default {
         mixins: [mixinCommon]
    }
</script>

全局混入

// 引入mixin
import myMixin from '@/mixin/mixin.js';
// 全局混入,使用mixin
Vue.mixin(myMixin)

## 使用和注意

引入之后，我的理解就是相当于我们把mixin中写的方法、数据、生命周期都引入到了对应的vue文件中，在vue2里面直接就像这样this.getList()使用就行了，相当于这些函数就是你写在vue文件中了。

但是需要注意的是：

重名问题

方法、数据等如果和vue文件中的重名了，默认会访问vue文件中原有的，个人认为也算是就近。引入了多个mixin重名，会访问后引入的。
方法和参数在各组件中不共享

mixin中写了一个num=0,A.vue把它改成了100，B.vue获取还是0。
生命周期问题

先执行mixin的，后执行vue文件中的生命周期

mixin的使用

mixin初体验

局部混入

全局混入