为什么 Vue3 推荐你告别 Mixins？
vue3 带来了很多令人兴奋的新特性，比如更快的速度、更好的 TypeScript 支持。在这些变化中，有一个理念上的转变非常关键：它推荐我们使用全新的“组合式 api”来替代 Vue2 时代广泛使用的 mixins。
这并不是说 mixins 被完全禁止了，而是 Vue 团队找到了一个更优秀的方式来组织代码。
Mixins 曾经很好用，但问题也不少
在 Vue2 的项目里，mixins 是代码复用的“大功臣”。你可以把一些通用的数据、方法或者生命周期钩子写在一个 mixin 文件里，然后轻松地混入多个组件。一开始，这看起来非常方便。
但是，当项目越来越大，使用的 mixins 越来越多时，麻烦就来了：
- 容易起冲突：如果组件本身和 mixin，或者两个不同的 mixin 里有一个同名的方法或数据，那么后引入的会覆盖先引入的。你很难一眼看出最终生效的是哪一个，调试起来很头疼。
- 搞不清来源：当你阅读一个组件的代码时，看到一个方法，你可能要花很长时间才能搞清楚这个方法到底是在这个组件里定义的，还是从哪个 mixin 里混入的。这大大增加了理解和维护代码的难度。
- 隐藏的依赖：有时候，一个 mixin 里的逻辑会偷偷依赖另一个 mixin 里的数据或方法。这种隐藏的关系没有在代码里明确声明，就像埋下了一个个“地雷”，一不小心就会导致错误。
- 不够灵活：Mixins 里的逻辑和 Vue 的组件选项（比如 data, methods）紧紧绑在一起，很难把这些逻辑抽离出来，在非 Vue 的环境或其他地方使用。
组合式 API：一个更清晰的解决方案
为了解决这些问题，Vue3 引入了组合式 API。它的核心思想是：用函数的方式来组织和复用代码。
让我们看一个具体的例子。假设我们有一个需要跟踪用户在线状态的功能。
在 Vue2 的 mixin 方式下，我们会把 isOnline 数据、checkStatus 方法以及监听网络事件的逻辑都写在一个 mixin 对象里。当组件使用这个 mixin 时，这些内容就被“混合”进去，来源不清晰。
而在 Vue3 的组合式 API 下，我们会这样做：
// useUserStatus.js - 这是一个组合式函数
import { ref, onMounted, onUnmounted } from 'vue'
export function useUserStatus() {
// 1. 创建响应式数据
const isOnline = ref(false)
// 2. 定义方法
function updateOnlineStatus() {
isOnline.value = navigator.onLine
}
// 3. 在组件挂载时设置监听
onMounted(() => {
window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)
// 初始化状态
updateOnlineStatus()
})
// 4. 在组件卸载时移除监听，防止内存泄漏
onUnmounted(() => {
window.removeEventListener('online', updateOnlineStatus)
window.removeEventListener('offline', updateOnlineStatus)
})
// 5. 返回所有需要在模板中使用的数据和方法
return {
isOnline
}
}然后，在组件里使用它：
// MyComponent.vue
<script setup>
import { useUserStatus } from './useUserStatus'
// 调用函数，获取返回的数据
const { isOnline } = useUserStatus()
</script>
<template>
<div>用户状态: {{ isOnline ? '在线' : '离线' }}</div>
</template>组合式 API 带来的好处是实实在在的
来源一清二楚：在组件里，你通过 import 和函数调用，明确地知道 isOnline 来自 useUserStatus 这个函数。
解决命名冲突：如果两个函数返回了同名的数据，你可以轻松地重命名。
const { isOnline: userIsOnline } = useUserStatus()
const { isOnline: deviceIsOnline } = useDeviceStatus()逻辑可以自由组合：相关的功能（比如用户状态和权限检查）可以写成独立的函数，然后在组件里像搭积木一样组合起来，所有代码都在一起，非常利于阅读和维护。
TypeScript 支持极佳：因为一切都是函数，输入和输出的类型可以被 TypeScript 完美地推断出来，给你准确的代码提示。
代码更容易复用和测试：组合式函数就是一个普通的 JavaScript 函数，你可以更容易地把它用在其他地方，或者单独进行测试。
一个真实的项目改进例子
想象一个金融交易系统，原来有一个处理交易逻辑的 mixin (tradingMixin)，它内部依赖了另一个检查用户权限的 mixin (userPermissionMixin)。这种依赖关系是隐藏的，不读完整代码很难发现。
改用组合式 API 后：
// usePermissions.js
export function usePermissions() {
// ... 权限相关的逻辑
const hasPermission = (code) => { /* ... */ }
return { hasPermission }
}
// useTrading.js
export function useTrading(permissionsHelper) {
// 明确地要求传入一个权限检查工具
const { hasPermission } = permissionsHelper
function executeTrade() {
// 这里可以清晰地看到 hasPermission 是从外面传进来的
if (hasPermission('TRADE_EXECUTE')) {
// 执行交易
}
}
return { executeTrade }
}
// 在组件中使用
<script setup>
import { usePermissions } from './usePermissions'
import { useTrading } from './useTrading'
// 组合各个函数
const { hasPermission } = usePermissions()
const { executeTrade } = useTrading({ hasPermission }) // 显式传递依赖
</script>经过这样的改造，代码的依赖关系像地图一样清晰。新同事接手项目时，能更快理解代码；在修改权限逻辑时，也能信心十足，不怕破坏未知的依赖部分。
总结
Vue3 放弃 mixins，转而推崇组合式 API，是一次为了解决实际开发痛点而进行的升级。它让我们的代码变得更可预测、更易维护、也更强大。
如果你的项目还在使用 mixins，不必急于一夜之间全部重写。Vue3 仍然兼容 mixins。但对于新功能，强烈建议你开始尝试组合式 API。你会发现自己编写和调试代码的效率都得到了提升。这正是 Vue3 为我们带来的，面向未来的开发体验。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！