什么是mixin？
vue的组件化解决了代码复用问题，同样mixin实现了组件中的组件
mixin提供了一种灵活的方式来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。（先忽略此官方解释）
注意mixin就是一个对象，它实现了将组件中的公共部分逻辑或者配置提取出来，达到可以复用的目的。
局部混入
-生命周期函数合并之后的执行顺序是先执行mixin中的，后执行组件的
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<button @click="clickMe">点击我</button>
<button @click="changeMsg">更改mixin数据</button>
<demo></demo>
</div>
</template>
<script>
import { mixins } from "./mixin/index";
import demo from "./components/demo.vue";
export default {
name: "App",
mixins: [mixins],
components: { demo },
created() {
console.log("组件调用minxi数据", this.msg);
},
mounted() {
console.log("我是组件的mounted生命周期函数");
},
methods: {
changeMsg() {
this.msg = "我是变异的小猪课堂";
console.log("更改后的msg:", this.msg);
},
},
};
</script>
全局混入
import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin/index";
Vue.mixin(mixins);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
优缺点
优点：
-提高代码的复用性
-无需传递状态
-维护方便，只需要修改mixin对象即可
缺点：
-命名冲突问题（组件会被优选选择）
-滥用的话后期难维护
-不好追溯源，排查问题较麻烦
