mixin用法

• mixin中的生命周期函数会和组件的生命周期函数都执行。先执行mixin中的，后执行组件的。
• mixin中的data数据和方法在组件内部可以直接调用。
• 一个组件中改动了mixin中的数据，另一个引用了mixin的组件不受影响。
• 当组件和mixin的数据或者方法冲突，组件中的数据和方法会覆盖mixin中数据和方法

1、mixin定义

export const mixins = {
  data() {
    return {
      msg: "我是小猪课堂",
    };
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函数");
  },
  mounted() {
    console.log("我是mixin中的mounted生命周期函数");
  },
  methods: {
    clickMe() {
      console.log("我是mixin中的点击事件");
    },
  },
};

2、执行顺序

console.log("我是mixin中的created生命周期函数");
console.log("我是组件中的created生命周期函数");
console.log("我是mixin中的mounted生命周期函数");
console.log("我是组件中的mounted生命周期函数");

2、局部混入

<template>
  <div id="app">
     <!-- 调用minxin的方法 -->
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import { mixins } from "./mixin/index";
export default {
  name: "App",
  mixins: [mixins],
  components: {},
  created(){
    <!-- 调用minxin的数据 -->
    console.log("组件调用minxi数据",this.msg);
  }
};
</script>

3、全局混入

• main.js

import { mixins } from "./mixin/index";
Vue.mixin(mixins);

4、mixin的优缺点

优点

• 提高代码复用性
• 无需传递状态
• 维护方便，只需要修改一个地方即可

缺点

• 命名冲突
• 滥用的话后期很难维护
• 不好追溯源，排查问题稍显麻烦
• 不能轻易的重复代码