【vue2】“混合”(Mixins)

Vue.js 的“混合”(Mixins)是一种用于封装可重用功能的机制，允许你在多个组件之间共享数据和行为。混合是一种非常有用的特性，尤其是在大型应用中，可以减少代码重复，提高组件间的代码复用率。

样例：

1、定义一个 mixin

const myMixin = {
  created() {
    console.log('Mixin created');
  },
  methods: {
    sayHello(name) {
      console.log(`Hello ${name}`);
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  },
  data() {
    return {
      message: 'Hello World'
    };
  }
};

 2、在组件中使用 mixin

<!--主体-->
<template>
  <div/>
</template>

<!--逻辑代码-->
<script>

export default {
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
}
</script>

<!--样式-->
<style lang="scss">
</style>

备注：
1、数据冲突: 如果 mixin 和组件定义了同名的数据属性，那么组件中的数据属性会覆盖 mixin 中的同名数据属性。为了避免这种情况，可以使用命名空间或者使用唯一的属性名称。
2、生命周期钩子: 当 mixin 和组件都定义了相同的生命周期钩子函数时，这些函数将会被串联起来调用。如果其中一个函数改变了 this 的状态，那么下一个函数将会接收到更新后的状态。
3、优先级: 组件自身的选项优先级高于 mixin 的选项。例如，如果 mixin 和组件都定义了 data() 函数，那么组件的 data() 将会被使用。
4、继承: Mixins 可以像组件一样继承和组合。一个 mixin 可以包含另一个 mixin，从而形成层次化的功能复用结构。
5、作用域问题: 在使用计算属性和方法时，要确保正确地处理作用域问题，避免不必要的全局变量污染。

6、使用Mixins时也要注意避免副作用和潜在的命名冲突，确保你的应用性能和可读性。