Mixin

Mixin

在组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取，在vue2和vue3中都支持的一种方式那就是使用Mixin来完成，Mixin提供了一种非常灵活的方式来分发vue组件中的可复用功能，因为一个Mixin对象中可以包含任何组件选项，当组件使用该Mixin对象时，所有Mixin对象的选项都将被合并进入该组件本身的选项中。

合并规则

如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么vue会在这里分成不同的情况来进行处理：

情况一：如果是data函数的返回值对象

（1）返回值对象默认情况下会进行合并。

（2）如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据。

情况二：如果是生命周期钩子函数

（1）生命周期的钩子函数会被合并到数组中并且都会被调用。

情况三：值为对象的选项，例如methods、computed都将被合并为一个对象。

（1）比如都有methods选项并且都定义了方法，那么它们都会生效；

（2）如果methods中的方法名相同的话，则会使用组件本身的方法。

demoMixin文件

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

局部使用

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="foo">按钮</button>
  </div>
</template>

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

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

    }
  }
</script>

全局混入Mixin

如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们也可以使用全局的Mixin：

（1）全局的Mixin可以使用app的方法mixin来完成注册。

（2）一旦注册，那么全局混入的选项将会对每一个组件都产生影响。

const app = createApp(App);

app.mixin({
  data() {
    return {}
  },
  methods: {},
  created() {
    console.log("全局的created生命周期");
  }
});

app.mount("#app");