Vue 中的混入（Mixin）：概念、应用与vue3替代方案

一、什么是 mixin？

        mixin 是一个包含组件选项的对象。当组件使用了 mixin 时，mixin 中的 data、methods、created 等生命周期钩子，会被“混入”到组件中。

二、mixin 的应用场景

1. 多个组件共享相似逻辑

例如：表单校验、权限控制、数据预处理等。

2. 生命周期逻辑复用

如多个组件初始化时都需拉取相同接口的数据。

3. 工具函数封装

统一封装格式化函数、事件监听、滚动处理等。有点类似于插件函数

看了上面的定义,是不是有点难以理解？我们来看一个例子就好了

// 定义一个 mixin
export const myMixin = {
  data() {
    return {
      msg: 'Hello from mixin'
    };
  },
  created() {
    console.log('Mixin created');
  },
  methods: {
    sayHi() {
      console.log(this.msg);
    }
  }
};

 这个例子中，我们对外暴露一个对象，下面是在组件使用它的方式

// 在组件中使用
export default {
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
};

控制台输出：

Mixin created
Component created

三、使用mixin 缺点

优点不必多说，就是提高代码的复用性。下面是缺点：

1.命名冲突：data、methods 容易撞名

注意：生命周期钩子将按先后顺序执行（mixin → 组件），但 data 和 methods 若有命名冲突，组件本身的定义优先！！！！

2.来源不明确：组件逻辑分散，难追踪,定义变量，函数，很难找到来源，在大型项目中会造成混乱

四.vue3中mixin的替代方案

在 Vue 2 时代，我们用 mixin 复用逻辑。但到了 Vue 3，有了新的、更好用的方式：Composition API。

一.用 Composition API 怎么实现？

很简单，编写useCounter.js文件

// useCounter.js（一个组合函数）
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return {
    count,
    increment
  };
}

在组件中使用：

// MyComponent.vue
<script setup>
import { useCounter } from './useCounter';

const { count, increment } = useCounter();
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

五.使用Composition API，生命周期的执行和命名冲突的处理方式是和mixin一样吗？

答案是不一样

mixin	Composition API
1.所有 mixin 和组件自己的生命周期钩子都会被合并执行。 2.执行顺序：mixin → 组件本身 3.如果你有多个 mixin，它们之间的执行顺序依赖 mixins 的引入顺序。	1.你可以在组合函数里用 Vue 提供的生命周期钩子（如 onMounted()、onCreated()），这些钩子在 setup() 执行时注册，并只作用于当前组件的生命周期。

Composition API命名冲突问题

不会有命名冲突问题！因为所有东西都是你自己手动引入、手动命名的，而mixin是只导入了mixin的名字，根本看不到mixin里面的内容