官方解释： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
个人理解： 如果在写vue组件时，发现有几个组件的逻辑类似，那么就可以使用vue的mixin（混入），把类似的逻辑抽离出来封装成js，然后在各个组件引入使用。mixin是一种可以在Vue组件中复用代码的方式。mixin可以包含任意的组件选项，例如data、methods、computed、watch等。当一个组件使用mixin时，它会将mixin中的选项与组件本身的选项合并。如果有选项名称冲突，一般情况下组件选项将覆盖mixin选项。
优势：
劣势：
由于mixin会导致命名冲突和混乱的依赖关系、灵活性和可读性问题，以及会导致编译效率和性能问题，在 Vue 3 中引入了更加灵活和可组合的 Composition API。Composition API 允许以函数的形式编写逻辑，并将其作为可复用的组合函数在组件中使用。这种方式提供了更好的代码组织结构、更明确的依赖关系和更高的可读性。通过 Composition API，开发者可以更灵活地组合功能并避免命名冲突。
但并不意味着 mixin 完全没有价值，混入仍然可以在某些情况下提供一些价值和灵活性。在 Vue 2 中，它仍然是一种常用的代码重用机制。特别是对于较小规模的项目或具有简单需求的组件，使用 mixin 可以提供一种简单且灵活的方式来组织和复用代码。
在使用混入时，需要权衡利弊，合理使用，并确保良好的代码组织和命名规范，以最大化地发挥混入的优势并减少其潜在的缺点。
// 定义一个 Mixin 对象
const myMixin = {
data() {
return {
message: 'Hello, Mixin!'
}
},
methods: {
greet() {
console.log(this.message);
}
}
}
// 在组件中引入 Mixin
Vue.component('my-component', {
mixins: [myMixin],
mounted() {
this.greet(); // 输出：Hello, Mixin!
}
})
myMixin 的 Mixin 对象，它包含了一个名为 message 的数据属性和一个名为 greet 的方法。然后，我们在一个组件中通过 mixins 选项引入了这个 Mixin。最终，在组件的 mounted 生命周期钩子中调用了 greet 方法，控制台输出了 Hello, Mixin!
data选项
生命周期钩子
方法与计算属性
当一个组件和Mixin都包含相同名称的方法或计算属性时，组件的方法或计算属性会覆盖Mixin的方法或计算属性。
除了上面这些选项，还有比如components（组件），和directives(指令)等也是一样的逻辑，同名的会覆盖，以组件的为优先。
与 Vuex 的区别
Vuex： 用来做状态管理，vuex中定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。相当于所有组件共享。
Mixins： 可以定义共用的变量，在每个组件中使用，引用组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。组件直接使用是相互隔离的，数据互不影响。
与公共组件的区别
组件： 在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 prop 来传值，但本质上两者是相对独立的。
Mixins： 在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
//导出
export const QueryPlan = {
data() {
return {
list: {
markets: [],
themes: [],
styles: [],
plays: [],
},
// ......
};
},
methods: {
getMarkets() {
// ...
},
getThemeList() {
// ...
},
getPlays() {
// ...
},
getStyles() {
// ...
},
// ......
},
created() {
// ......
},
mounted() {
// ......
},
};
<template>
<div id="main">
<!-- ... -->
</template>
<script>
// 引入
import { QueryPlan } from "~/mixins/queryPlan.js";
export default {
name: "index",
mixins: [QueryPlan],
data() {
return {
// ...
};
},
mounted() {
// ...
},
methods: {
// ...
},
watch: {
// ...
},
computed: {
// ...
},
};
</script>
<style lang="scss" scoped>
</style>