Vue.js 的混入（mixins）是一种非常有用的特性，它允许你将可复用的功能或组件选项封装起来，然后在需要的地方引入这些功能或选项。混入对象可以包含任意组件选项，比如数据（data）、方法（methods）、生命周期钩子（如 created、mounted）等。当组件使用混入对象时，所有混入对象的选项将被“混入”该组件本身的选项。

如何定义混入

你可以通过定义一个包含组件选项的对象来创建混入。这个对象可以包含任意组件选项。

// 定义一个混入对象
const myMixin = {
  created() {
    this.hello();
  },
  methods: {
    hello() {
      console.log('hello from mixin!');
    }
  }
}

如何使用混入

在组件中，你可以通过在其 mixins 选项中声明一个混入对象数组来使用混入。混入对象数组中的对象会在组件自身的选项之前被合并。

<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>

<script>
// 引入上面定义的混入
import myMixin from './myMixin'

export default {
  mixins: [myMixin],
  created() {
    // 注意：这个钩子将先于混入对象的钩子被调用
    console.log('component hook called');
  }
}
</script>

混入合并策略

• 数据对象：在合并时，组件的数据对象会优先于混入对象的数据对象被合并。如果两个对象有冲突（即它们有相同的属性），组件的数据会覆盖混入对象的数据。
• 生命周期钩子：同名的生命周期钩子函数将合并为一个数组，并在调用时依次执行。混入对象的钩子会先于组件自身的钩子被调用。
• 方法：组件的方法会和混入对象中的方法合并。如果两个对象有同名的方法，组件的方法会覆盖混入对象的方法。
• 其他选项：如组件（components）、指令（directives）、过滤器（filters）等，这些选项在合并时会使用相同的策略：组件的选项会优先于混入对象的选项。

注意事项

• 当使用混入时，需要谨慎处理选项的合并冲突，尤其是当多个混入对象含有相同的选项时。
• 混入也可以嵌套使用，即一个混入对象可以包含另一个混入对象。
• 混入提供了一种非常灵活的方式来分发 Vue 组件中的可复用功能。然而，它们也可能导致组件间的隐式依赖关系，因此建议谨慎使用。