Vue3_09(Mixin)

组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。

　　Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
　　一个Mixin对象可以包含任何组件选项；比如data,method,生命周期钩子函数
　　当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；

#App.vue
<script>
  import { demoMixin } from './mixins/demoMixin';

  export default {
    mixins: [demoMixin],
    data() {
      return {
        title: "Hello World"
      }
    },
    methods: {

    }
  }
</script>

#demoMixin.js
export const demoMixin = {
  data() {
    return {
      message: "Hello DemoMixin"
    }
  },
  methods: {
    foo() {
      console.log("demo mixin foo");
    }
  },
  created() {
    console.log("执行了demo mixin created");
  }
}

Mixin的合并规则

情况一：如果是data函数的返回值对象
　　返回值对象默认情况下会进行合并；
　　如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；
情况二：如何生命周期钩子函数
　　生命周期的钩子函数会被合并到数组中，都会被调用；
情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
　　比如都有methods选项，并且都定义了方法，那么它们都会生效；
　　但是如果对象的key相同，那么会取组件对象的键值对；

全局混入Mixin

全局混入的选项将会影响每一个组件

const app = createApp(App);
#全局混入
app.mixin({
  data() {
    return {}
  },
  methods: {

  },
  created() {
    console.log("全局的created生命周期");
  }
});

app.mount("#app");