在 Vue 2 时代，逻辑复用的主要手段是 Mixin 混入。一个 Mixin 就是一个对象，里面可以包含 data、methods、生命周期钩子等选项，然后在组件里通过 mixins 数组引入，让该组件自动“继承”这些选项。这种方式在项目规模较小时还能应付，但一旦多个 Mixin 叠加、逻辑交错，维护起来就非常头疼。
Vue 3 的组合式 API 提供了自定义 Hooks（组合式函数）这一全新逻辑复用模式，它不是 Mixin 的语法糖，而是一种思维上的根本改变：从“把一堆选项倒进组件”变成“用函数主动引入能力”。
Mixin 的三个核心问题
1. 来源不清，难以追踪
当你在一个组件中使用了某个属性或方法，你无法一眼看出它是来自组件自身的 data，还是来自某个 Mixin。所有 Mixin 的选项都被“拍平”到组件实例里，就像一个黑盒：
// userMixin.js
export default {
data() {
return { userName: '' }
},
methods: {
fetchUser() { /* ... */ }
}
}
// 组件中
export default {
mixins: [userMixin],
mounted() {
this.fetchUser() // fetchUser 从哪里来的？只能靠记忆或搜索
}
}当 Mixin 数量多到五六个时，定位一个方法或属性的来源会变成一件不断全局搜索的体力活。
2. 命名冲突，静默覆盖
不同 Mixin 之间，或者 Mixin 与组件自身之间，如果定义了同名属性或方法，Vue 会按照一定规则合并——同名钩子会合并成数组，methods 和 components 中的同名项则会被覆盖。这种覆盖是静默的，不会警告，可能引发难以排查的 bug。
const mixinA = { data() { return { val: 'A' } } }
const mixinB = { data() { return { val: 'B' } } }
export default {
mixins: [mixinA, mixinB],
// 最终 this.val 是 'B'，mixinA 的值被吞掉了
}没有类型提示，没有编译期检查，一切都在运行时悄悄发生。
3. 隐式依赖，耦合黑盒
一个 Mixin 可能依赖组件提供的 data 或 methods，反过来组件也依赖 Mixin 暴露的属性。这种双向依赖关系是隐式的，没有明确的接口定义。比如某 Mixin 在 mounted 里调用 this.loadData()，但 loadData 得由组件去实现——这种“约定”全靠在注释里说明，一旦团队人员变动，没人敢轻易改动 Mixin 的代码。
自定义 Hooks 的优势
自定义 Hooks 本质上就是一个独立的函数，通过 ref、reactive、computed 等响应式 API 封装状态和逻辑，最后把需要暴露的数据和方法 return 出去。组件主动调用这个函数，获得一个明确返回的对象。
同样以用户数据为例：
// useUser.js
import { ref } from 'vue'
import { getUserApi } from '@/api/user'
export function useUser() {
const userName = ref('')
const loading = ref(false)
async function fetchUser(id) {
loading.value = true
try {
const res = await getUserApi(id)
userName.value = res.name
} finally {
loading.value = false
}
}
return { userName, loading, fetchUser }
}在组件中使用：
<script setup>
import { useUser } from '@/composables/useUser'
const { userName, loading, fetchUser } = useUser()
fetchUser(1)
</script>
<template>
<div v-if="loading">加载中...</div>
<div v-else>{{ userName }}</div>
</template>对比 Mixin，它的优势一目了然：
- 来源清晰可追踪：变量和方法是通过
const { ... } = useUser()显式引入的，IDE 的“跳转到定义”立刻能定位到具体实现。不需要猜“这个值是从哪里来的”。
- 命名冲突自己解决：如果两个 Hooks 返回了同名变量，JS 的解构或重命名会立刻暴露问题，你可以在接收时手动重命名：
const { userName: adminName } = useUser()
const { userName: managerName } = useUser()
一切都在你眼皮底下发生，没有静默覆盖。
- 依赖显式、接口明确：一个 Hook 需要什么参数，通过函数入参传递；提供什么能力，通过返回值暴露。它是一个纯函数式的包装，内部可以依赖其他 Hook，但与组件之间是单向、清晰的关系。你不需要去“猜”组件该提供什么数据供 Hook 使用。
- 更好的类型推导：配合 TypeScript，自定义 Hooks 可以将返回值类型自动推导出来，编辑器能给出完整的智能提示。而 Mixin 的类型推断需要额外的配置技巧，且效果有限。
- 逻辑内聚、高可复用：一个 Hook 可以封装一整块独立功能（如防抖提交、分页查询、拖拽处理），甚至可以在多个组件中创建独立的状态实例，互不干扰。而 Mixin 如果被多个组件复用，它们共享的是一个合并后的数据定义，实例之间容易互相影响。
- 可组合、可嵌套：一个 Hook 可以调用另一个 Hook，就像搭建乐高积木。例如
usePagination内部调用useRequest，useForm内部调用useValidation，代码结构呈树状，可维护性极强。
什么时候还值得用 Mixin？
在 Vue 3 中，几乎找不到非得用 Mixin 的充分理由。即使是在迁移旧项目时，也应该优先考虑把 Mixin 重构成自定义 Hooks，用组合式 API 重新封装。Vue 3 的 mixins 选项虽然被保留，但官方文档和社区都已经明确建议用组合式函数取代所有 Mixin 场景。
一句话总结：Mixin 是把一堆零散的特性“泼”进组件，你只能接受并自行消化混乱；自定义 Hooks 是给组件一把钥匙，让它自己去打开一个清晰的功能抽屉。前者是继承式的隐式混合，后者是组合式的显式调用——在大型项目中，这种思维转变对代码长期健康的价值是巨大的。