Vue中Mixin的初级认识

Mixin实现对是组件和组件之间相同的代码逻辑进行抽取。

Mixin基本认识：

• Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
• 一个Mixin对象可以包含任何组件选项；
• ​当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；

合并规则：
情况一：如果是data函数的返回值对象
​ 返回值对象默认情况下会进行合并；
​ 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；

情况二：如何生命周期钩子函数
​ 生命周期的钩子函数会被合并到数组中，都会被调用；（Mixin中的优先执行）

情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
​ 比如都有methods选项，并且都定义了方法，那么它们都会生效；
​ 但是如果方法名(对象key值)相同，那么会取组件的方法(对象key值)中的内容；

全局混入：一旦注册，那么全局混入的选项将会影响每一个组件；

const app = createApp(App);

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

app.mount("#app");

extends用的非常少，在Vue2中比较推荐使用Mixin，而在Vue3中推荐使用Composition API。