Vue3作为一个性能更强、TypeScript 支持更好、更灵活的渐进式前端框架，其中最受瞩目的变革之一就是对mixins的态度转变。
mixins的黄金时代与隐患
在Vue2中，mixins作为代码复用的主要手段享有盛誉。开发者只需编写一次逻辑，就能通过mixins机制将其注入到多个组件中。表面上，这种方式简洁优雅，一时风靡整个Vue生态。
然而，随着项目规模扩大，mixins的弊端逐渐显露：
- 命名冲突难以避免：多个mixins中的方法和属性会合并到同一组件实例，当出现同名属性时，组件自身的属性会覆盖mixins中的同名属性，而多个mixins之间的冲突规则则不够直观。
- 来源不明确：在阅读组件代码时，开发者经常会遇到”这个方法从哪来的？”的困惑。数据和方法的来源可能散布在多个mixins文件中，增加了认知负担。
- 隐式依赖：mixins之间可能存在互相依赖关系，这种依赖往往是隐式的，导致代码维护难度倍增。
- 可复用性受限：mixins中的逻辑与Vue组件生命周期紧密耦合，难以在非Vue环境中复用。
组合式API：函数式编程的胜利
面对这些挑战，Vue3推出了组合式API。这一设计灵感部分来源于React
Hooks，但更符合Vue的设计哲学。组合式API本质上是将组件逻辑从声明式的Options API转向更灵活的函数式组合方式。
// Vue3组合式API示例
import { ref, watch, onMounted } from'vue'
exportfunctionuseUserStatus() {
const isOnline = ref(false)
constcheckStatus = () => {
// 检查用户状态逻辑
isOnline.value = navigator.onLine
}
watch(isOnline, (newStatus) => {
console.log(`用户状态变为: ${newStatus ? '在线' : '离线'}`)
})
onMounted(() => {
checkStatus()
window.addEventListener('online', () => (isOnline.value = true))
window.addEventListener('offline', () => (isOnline.value = false))
})
return {
isOnline,
checkStatus
}
}
组合式API的优势在于：
- 显式依赖：函数的参数和返回值清晰地表达了依赖关系，告别了mixins中的隐式依赖。
- 来源清晰：当使用组合函数时，我们明确知道每个属性和方法的来源。
3.命名冲突可控：得益于JavaScript解构赋值的特性，我们可以在引入时轻松重命名，避免冲突。
const { isOnline: userOnlineStatus } = useUserStatus()
4.逻辑分组：相关功能可以组织在一起，而不是分散在不同的选项中。这使得代码更容易理解和维护。
5.与TypeScript完美配合：函数参数和返回值的类型推断比对象合并更为直观，大大增强了IDE的智能提示能力。
实际项目中的转变
某金融科技公司在重构其交易平台时，将原本基于mixins的代码迁移到了组合式API。原先他们有一个复杂的权限管理系统，依赖于多个交叉使用的mixins：
旧方式（使用mixins）：
这种方式导致了明显的问题：tradingMixin隐式依赖于userPermissionMixin中的hasPermission方法，但这种依赖关系在代码中并不明显。
新方式（使用组合式API）：
// 用户权限组合函数
exportfunctionusePermissions() {
const permissions = ref([])
functionhasPermission(code) {
return permissions.value.includes(code)
}
functionloadPermissions() {
// 加载权限逻辑
}
onMounted(() => {
loadPermissions()
})
return {
permissions,
hasPermission,
loadPermissions
}
}
// 交易功能组合函数
exportfunctionuseTrading(dependencies) {
const { hasPermission } = dependencies
functionexecuteTrade() {
if (hasPermission('TRADE_EXECUTE')) {
// 执行交易逻辑
}
}
return { executeTrade }
}
// 在组件中使用
exportdefault {
setup() {
const { hasPermission } = usePermissions()
const { executeTrade } = useTrading({ hasPermission })
return { hasPermission, executeTrade }
}
}
重构后，依赖关系变得显式且清晰，代码可维护性大幅提升。
尽管有些老项目仍在使用mixins，但Vue团队也明智地保留了对mixins的支持，使渐进式迁移成为可能。Vue官方甚至提供了一套mixins到组合式API的迁移指南，帮助开发者平稳过渡。