vue使用mixin

### 如何在 Vue 中使用 Mixin

#### 定义 Mixin
Mixin 是一种分发 Vue 组件复用功能的灵活方式。一个 mixin 对象可以包含任意数量的选项，这些选项会在组件中被混合。

const myMixin = {
  created() {
    console.log('mixin hook called');
  },
  methods: {
    greet() {
      alert('Hello from mixin!');
    }
  }
};

#### 使用 Mixin
为了使自定义的 `myMixin` 生效，在创建新组件时可以通过 `mixins` 属性来应用它[^1]：

new Vue({
  mixins: [myMixin],
  created() {
    // this.greet is available because of the mixin.
    this.greet();
  }
});

当组件和混入对象含有同名钩子函数时，二者都会调用，并且会按照特定顺序执行——先执行的是来自混入对象的方法，再执行组件自身的相应方法。

对于选项如数据 (`data`) 或者方法 (`methods`) 如果存在冲突，则以组件中的为准而忽略掉混入的内容；而对于像生命周期钩子这样的特殊属性则不会发生覆盖而是全部保留并按上述提到的方式依次触发。

通过这种方式可以在多个地方重用相同的逻辑而不必重复编写代码，提高了开发效率同时也让维护变得更加容易。