标准答案
- mixins 的问题是属性和方法来源隐式,命名冲突不明显,多个 mixin 叠加后逻辑很难追踪。
- filters 在 Vue 3 中被移除,格式化逻辑更适合使用普通函数、computed 或模板中的方法调用。
- event bus 容易形成全局隐式依赖,事件名没有类型约束,监听清理不当还会造成内存泄漏。
- 组合式函数 composable 可以替代大部分 mixins,把状态、副作用和返回值显式暴露出来。
- 跨页面共享状态优先考虑 Pinia;少量兄弟组件临时通信可以用父组件协调、provide/inject 或受控事件工具。
题目解析
迁移回答要先说旧模式的问题,再说替代方案,不能只说“Vue 3 不推荐”。
mixin 到 composable 的核心变化是从隐式合并选项,变成显式调用函数并接收返回值。
event bus 不是绝对不能用,而是不适合承担业务核心状态。短生命周期事件可以用事件工具,但要有注册和清理边界。
代码示例
下面展示了把 mixin 中的复用逻辑改成 composable 后,来源会更清楚。
TypeScript
export function useLoading() {
const loading = ref(false)
async function withLoading(task: () => Promise<void>) {
loading.value = true
try {
await task()
} finally {
loading.value = false
}
}
return {
loading,
withLoading
}
}常见误区
- 把 mixins 原样搬到 Vue 3 项目里,继续堆隐式属性和方法。
- 用全局 event bus 承载用户、权限、订单等核心业务状态。
- 把 filters 删除后直接在模板里写复杂格式化表达式,导致模板难读。