概念：

• mixin 混入是 options API 中复用代码的常见方式

用法：

1. 声明

• mixin 的声明和 options API 中的用法完全相同

const myMixin = {
  data() {
    return {
      a: 1,
      b: 2,
      c: 3
    };
  }
};

2. 调用

• 局部调用：options.mixins 选项数组添加

import { defineComponent } from 'vue';

import myMixin from '@/mixins/myMixin';

export default defineComponent({
  mixins: [myMixin],
});

• 全局调用：app.mixin 方法

import myMixin from '@/mixins/myMixin';

app.mixin(myMixin);

用途：

• mixin通常使用在复用请求逻辑, 公共内容注册(组件, 指令, 过滤器)

特点：

1. 选项自身的内容和mixin有冲突时, 先访问组件自身的属性
2. 生命周期函数执行, mixins的执行顺序比组件内部优先
3. 对象中的option, methods, components, directives, 会合并对象, 同名的字面量-组件内部优先
4. mixin不仅能在组件内部注册, 也能够全局注册(Vue/app), 但是并不推荐此法

mixin的局限性(不足)：

1. 用于多个组件时, 可能会多出很多不必要的选项或属性 (无线拆分, 冗余) 命名冲突
2. 无法通过函数的参数进行控制, 无法通过动态传参调整 mixin 的 option 的混入情况 (干扰合理性复用)