vue 3 推荐使用组合式 api + 自定义 hook（组合函数）实现高效逻辑复用，因其职责单一、类型友好、无命名冲突且可嵌套；vue 2 中 mixins 仅适用于遗留迁移，存在隐式覆盖与调试困难等问题；ui 层应结合 props、插槽与 emits 构建高复用组件，并按业务域而非技术类型组织逻辑。

Vue 项目中实现高效逻辑复用，核心在于按关注点组织代码、避免隐式耦合，并适配 Vue 版本演进。Vue 2 主要依赖 Mixins，而 Vue 3 推荐使用组合式 API + 自定义 Hook（即组合函数），这是更清晰、更可维护、更易测试的方式。

优先使用组合函数（Vue 3 推荐）

组合函数是独立的 JavaScript 函数，封装响应式状态、计算属性、副作用和方法，通过 setup 或 <script setup></script> 导入调用，返回需要暴露给模板的值。

• 每个函数聚焦单一职责，例如 usePagination 管理分页，useDateFormatter 处理时间格式化
• 支持 TypeScript 类型推导，参数、返回值均可精准标注
• 无命名冲突风险：所有变量都在函数作用域内，不会与组件自身属性意外覆盖
• 可嵌套组合：一个组合函数可调用多个其他组合函数，形成逻辑链

谨慎使用 Mixins（仅限 Vue 2 或遗留迁移场景）

Mixins 适合快速迁移老项目或临时复用简单逻辑，但存在明显局限：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 数据、方法、生命周期钩子会与组件选项“合并”，同名时后者覆盖前者，容易引发隐式行为
• 无法明确追踪某个方法来自哪个 Mixin，调试和协作成本高
• 不支持类型自动推导，TypeScript 下需额外声明
• Vue 3 中已不推荐，官方文档明确建议改用组合式 API

结合插槽与 Props 构建高复用 UI 组件

逻辑复用不止于 JS 层，UI 层同样需要模块化设计：

• 通过 props 控制行为（如 size、variant、disabled）
• 用 具名插槽 和 作用域插槽 支持内容定制，比如表格组件暴露 #header 和 #item="{ row }"
• 配合 emits 定义清晰的事件契约，让父组件只关心“做什么”，不关心“怎么做”

按业务域拆分逻辑，而非技术类型

避免把所有 methods 抽成一个大 mixin，也不要把所有 ref 堆在 setup 里。正确做法是：

• 围绕功能组织，比如“用户登录流程”可拆出 useLogin（含 token 管理、错误处理、loading 状态）
• 围绕资源组织，比如“订单列表”对应 useOrderList（含请求、分页、筛选、刷新）
• 目录结构体现分层：/composables/useXxx.ts、/components/UiXxx.vue、/stores/user.ts

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！