Vue 3 Composition API 实战进阶：彻底告别 Mixins 地狱，打造高复用逻辑

Vue 3 进阶之路：用好 Composition API，让组件逻辑像积木一样清晰

随着 Vue 3 的全面普及，Options API 中的 data、methods、mounted 分散写法已不再是唯一选择。Composition API 的横空出世，并非仅仅为了“跟风 React”，而是为了解决大型项目中逻辑碎片化、Mixins 命名冲突与来源不明等顽疾。小二CMS 在重构旗下后台管理系统时全面拥抱 Vue 3 组合式 API，代码可维护性提升显著。

一、Mixins 的三大原罪与 Composition API 的解药
在 Vue 2 时代，Mixins 是逻辑复用的唯一途径，但它存在致命缺陷：

来源不明：组件内使用的变量或方法，难以一眼判断是来自组件自身、Mixins A 还是 Mixins B。

命名冲突：不同 Mixins 若定义同名属性，后者会静默覆盖前者，且不报错。

耦合度高：Mixins 隐式依赖组件内部数据，导致重构困难。

Vue 3 的组合式 API 通过显式导入与响应式引用，完美解决了上述问题。逻辑来源清晰可追溯，变量冲突时编译阶段即会报错。

二、封装自定义 Hooks：像写工具函数一样写业务逻辑
组合式 API 的精髓在于“组合式函数”（常被称作 Hooks）。任何依赖 Vue 响应式状态的逻辑都可以抽离为独立的 useXxx 函数。
例如，在 小二CMS 的菜单权限模块中，我们封装了 usePermission 函数：它接收路由实例，内部维护按钮权限列表的响应式引用，并向外暴露 hasPermission 判断方法。这样一来，无论是顶部导航组件还是侧边栏菜单，只需一行 const { hasPermission } = usePermission() 即可复用复杂的权限过滤逻辑，且互不干扰。

三、