Mixin

基础

混入（mixin） 是一种非常方便的组件复用方式，可以将一些常用的逻辑或者功能封装成一个混入对象，然后在多个组件中引用，从而实现代码复用和减少重复代码的编写。

混入（mixin） 的定义方式：

• 局部定义：
  • 通过组件实例中的 mixins 注册 mixin 对象。

// common.js
export default {
    data() {
       return {}
    },
    created() {},
    methods: {}
};

// Home.vue
import common from "/mixin/common.js";
export default {
    mixins: [common],
};

• 全局定义：
  • 通过 Vue.mixin() 在 new Vue 前进行注册。

Vue.mixin({
    created() {},
    methods: {}
});

选项合并

当组件和混入对象含有同名选项时，这些选项会采用 合并。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

const common = {
  mounted() {
    console.log("混入的mounted");
  },
};
export default {
  // 注册混入
  mixins: [common],
  
  mounted() {
    console.log("组件的mounted");
  },
};

data 数据对象在合并的时候如有有冲突，则以组件数据优先。

<template>
  <div>{{ msg }}</div>
</template>

<script>
const common = {
  data() {
    return {
      msg: "混入的msg"
    };
  },
};
export default {
  // 注册混入
  mixins: [common],

  data() {
    return {
      msg: "组件的msg"
    };
  },
};
</script>

如：methods、components 和 directives，都会被合并成一个对象，如果其中属性名发生冲突，则以组件数据优先。

<template>
  <button @click="buttonClick">点击</button>
</template>

<script>
const common = {
  methods: {
    buttonClick() {
      console.log("混入的methods");
    },
  },
};
export default {
  // 注册混入
  mixins: [common],

  methods: {
    buttonClick() {
      console.log("组件的methods");
    },
  },
};
</script>

混入的缺点

• 数据来源变得不清晰，当使用多个 mixin 的时候，实力上的数据来源有哪里变得不清晰。这使得理解组件的行为变得困难。
• 命名冲突，多个 mixin 可能来自不同的作者，可能会注册相同的属性名，造成命名冲突。
• 隐式跨 mixin 交流，在使用多个 mixin 时，当前 mixin 文件使用到了其他 mixin 文件中的数据。这使得它们隐性的耦合在一起。