vue 混入(Mixin)

Vue 中的混入（Mixin）是一种可重用的代码抽象机制，允许你在多个组件之间共享一些相同的功能。通过混入，你可以将一组选项对象合并到组件中，从而使得这些选项在组件中生效。

创建混入

要创建一个混入，只需简单地定义一个普通的 JavaScript 对象，其中包含你想要混入的选项，然后通过 mixins 选项将其混入到组件中。

javascriptCopy Code
// 创建一个混入对象
const myMixin = {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 将混入应用到组件中
Vue.component('my-component', {
  mixins: [myMixin],
  template: '<button @click="increment">{{ count }}</button>'
});

混入的选项合并

当一个组件使用混入时，混入的选项会和组件本身的选项进行合并。如果出现选项冲突，以组件自身的选项为准，但对于钩子函数（如 created、mounted 等）会按照一定顺序依次调用。

注意事项

• 避免在混入对象中使用与组件实例相同名称的选项，以免发生冲突。
• 尽量保持混入对象的简洁，不要包含过多的逻辑，以免混入过多导致代码不易维护。

钩子函数（如 created、mounted 等）会按照一定顺序依次调用。

具体来说，Vue 在调用钩子函数时会遵循以下规则：

1. 首先，会调用混入对象的钩子函数。
2. 然后，调用组件自身的钩子函数。

这意味着混入对象的钩子函数会在组件自身的钩子函数之前被调用。

举个例子，假设有一个混入对象和一个组件，它们都定义了 created 钩子函数：

javascriptCopy Code
const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

Vue.component('my-component', {
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
});

在这个例子中，当 my-component 组件被创建时，首先会输出 "Mixin created"，然后输出 "Component created"。

这个顺序保证了混入对象中的逻辑能够在组件自身的逻辑之前执行，从而可以为组件提供一些公共的行为或逻辑。

需要注意的是，如果混入对象和组件自身定义了相同的选项，Vue 会采用特定的策略进行选项合并，但生命周期钩子函数是按照前述的顺序依次调用的。