Vue.js 混入

Vue.js 混入（Mixin）是一种代码复用的方式，允许我们将常见的代码逻辑封装在可重用的模块中，然后在不同的组件中使用。这个特性使得代码更加模块化、可拓展性更好，更加易于维护。

创建混入

为了创建一个混入，我们需要使用 Vue.mixin() 方法来定义代码逻辑，该方法接受一个包含钩子函数的对象作为参数。例如：

// mixin.js
export default {
  created() {
    console.log('mixin created')
  }
}

此Mixin定义了一个 created 钩子函数，每当一个组件通过 Vue.mixin() 方法使用该Mixin时，created 钩子函数就会在组件实例化时执行。

使用混入

要使用已创建的混入，使用 mixins 选项将其传递给组件。例如：

// mixin-component.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import myMixin from 'path/to/mixin.js'

export default {
  mixins: [myMixin],
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

通过这种方式，myMixin 的所有钩子函数都将合并到组件中。在这个例子中，混入已实现在组件实例化时输出了一个消息，而当前组件 mixin-component.vue 只有一个数据属性 message。

请注意，如果组件中定义了钩子函数，则它将在混入的钩子函数后被调用。

合并策略

当多个混入包含相同的选项时，在合并混入和组件选项时，Vue有一套合并策略。以下是选项的合并顺序：

1. 数据对象：从混入到组件依次合并数据对象，与现有对象属性合并。如果有冲突，则组件属性将优先于混合属性。
2. 钩子函数：混入钩子函数先于组件钩子函数调用，同时也支持混入的钩子函数调用组件的钩子函数。
3. 其他选项：除数据和钩子外的选项，如 methods 和 computed 选项等，以相同的方式从混入到组件进行合并。

需要注意的是，混入中的代码会在组件代码之前执行，因此可以在混入中定义一些通用方法、变量等。但是，如果混入和组件都定义了同名的方法或变量，则组件的方法或变量会覆盖混入的内容。

结束语

混入是 Vue.js 非常有用的特性之一，可以使代码更加模块化，可重用性更强。但是，如果不注意合适的使用，可能会降低代码的可读性和维护性。所以，在使用混入的时候，一定要谨慎并合理利用，将其用在代码逻辑较复杂、特定功能的组件中。