面试题：什么是 Vue 中的 mixin？它有哪些应用场景？

1. 什么是 mixin？

mixin 是 Vue 中一种用于复用组件选项的机制。它允许将一组组件选项（如 data、methods、生命周期钩子 等）混入到多个组件中，从而避免重复代码。

2. mixin 的基本用法

（1）定义 mixin

// myMixin.js
export const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!',
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    },
  },
  mounted() {
    console.log('Mixin mounted');
  },
};

（2）在组件中使用 mixin

import { myMixin } from './myMixin';

export default {
  mixins: [myMixin],
  mounted() {
    console.log('Component mounted');
  },
};

输出：

  Mixin mounted
  Component mounted

3. mixin 的合并规则

当 mixin 和组件定义了相同的选项时，Vue 会按照以下规则进行合并：

（1）数据对象（`data`）

如果 mixin 和组件都定义了 data，Vue 会递归合并 data 对象。
如果 data 中的属性冲突，组件中的属性优先级高于 mixin。

示例

const mixin = {
  data() {
    return {
      message: 'Hello from mixin',
      count: 1,
    };
  },
};

export default {
  mixins: [mixin],
  data() {
    return {
      message: 'Hello from component',
      name: 'Vue',
    };
  },
};

合并后的 data：

  {
    message: 'Hello from component', // 组件优先级高
    count: 1, // 来自 mixin
    name: 'Vue', // 来自组件
  }

（2）生命周期钩子

如果 mixin 和组件都定义了相同的生命周期钩子（如 mounted），这些钩子会被合并成一个数组，并按以下顺序执行：
1. mixin 的钩子。
2. 组件的钩子。

示例

const mixin = {
  mounted() {
    console.log('Mixin mounted');
  },
};

export default {
  mixins: [mixin],
  mounted() {
    console.log('Component mounted');
  },
};

输出：

  Mixin mounted
  Component mounted

（3）方法、计算属性和侦听器

如果 mixin 和组件定义了同名的方法、计算属性或侦听器，组件的选项会覆盖 mixin 的选项。

示例

const mixin = {
  methods: {
    greet() {
      console.log('Hello from mixin');
    },
  },
};

export default {
  mixins: [mixin],
  methods: {
    greet() {
      console.log('Hello from component');
    },
  },
};

调用 greet 方法时，输出：

  Hello from component

4. mixin 的应用场景

（1）复用逻辑

将通用的逻辑（如表单验证、数据获取等）提取到 mixin 中，避免重复代码。

示例

// formMixin.js
export const formMixin = {
  data() {
    return {
      formData: {},
      errors: {},
    };
  },
  methods: {
    validateForm() {
      // 表单验证逻辑
    },
    submitForm() {
      if (this.validateForm()) {
        // 提交表单
      }
    },
  },
};

（2）扩展组件功能

通过 mixin 为组件添加额外的功能，而不需要修改组件本身的代码。

示例

// loggerMixin.js
export const loggerMixin = {
  mounted() {
    console.log('Component mounted:', this.$options.name);
  },
  beforeDestroy() {
    console.log('Component destroyed:', this.$options.name);
  },
};

（3）全局混入

通过 Vue.mixin 将 mixin 应用到所有组件。

示例

Vue.mixin({
  created() {
    console.log('Global mixin created');
  },
});

5. mixin 的优缺点

优点

代码复用：避免重复代码，提升开发效率。
灵活性：可以动态地为组件添加功能。

缺点

命名冲突：如果 mixin 和组件定义了相同的选项，可能会导致冲突。
难以追踪：mixin 的逻辑分散在多个文件中，可能导致代码难以维护。

6. 替代方案

Composition API（Vue 3）：通过 setup 函数和自定义 Hook 实现逻辑复用，避免 mixin 的缺点。
高阶组件：通过函数式组件实现逻辑复用。

总结

mixin 是一种用于复用组件选项的机制，适合提取通用逻辑和扩展组件功能。
合并规则：
- data：组件优先级高于 mixin。
- 生命周期钩子：mixin 钩子先执行，组件钩子后执行。
- 方法、计算属性、侦听器：组件优先级高于 mixin。
应用场景：
- 复用逻辑（如表单验证、数据获取）。
- 扩展组件功能。
- 全局混入。