Vue.js逻辑共享应优先选用组合式函数而非mixins。mixins适用于Vue2项目或Vue3中快速迁移旧代码，适合封装低耦合通用行为；组合式函数则因来源明确、避免命名冲突、支持多实例及TypeScript友好而更清晰可靠。
Vue.js 中逻辑共享的核心分歧，不在“能不能用”，而在“用得清不清楚、改得稳不稳妥”。mixins 是 Vue2 的惯用解法，组合式函数（Composables）是 Vue3 的推荐路径——二者都能复用逻辑，但设计哲学和实际体验差异明显。
mixins 适合什么场景？
当项目仍基于 Vue2，或 Vue3 中需快速迁移旧代码、临时打补丁时，mixins 仍有实用价值。它本质是“选项合并”，适合封装明确、低耦合的通用行为：
-
统一生命周期行为：比如多个页面都需要在 created 中调用
fetchData()、在 beforeUnmount 中清理定时器； - 轻量级 UI 交互逻辑：自动聚焦输入框、滚动监听、快捷键绑定等不依赖复杂状态的逻辑；
- 基础工具方法注入：如格式化日期、校验邮箱、节流函数等纯函数型能力，通过 methods 暴露即可。
注意：一旦涉及响应式数据（如 data 返回同名字段）、多个 mixins 共存，或需要追踪某状态来自哪个模块，就容易陷入命名冲突与溯源困难。
组合式函数为什么更清晰？
Composables 把逻辑封装成可导入、可解构、可重命名的函数，每个调用都是独立作用域，不存在隐式合并：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
来源一目了然：
const { count, inc } = useCounter()，变量从哪来、谁负责更新，写在调用处； -
避免命名污染：可按需解构并重命名，
const { count: listCount, inc: incrementList } = useCounter()，彻底规避冲突； -
支持多实例复用：同一组件内可多次调用
useCounter()，得到完全隔离的状态，mixins 无法做到这点； - 天然适配 TypeScript：返回值类型明确，IDE 能精准推导，而 mixins 的 data 合并后类型常变宽或丢失。
怎么判断该用哪个？
不靠经验拍板，看三个硬指标：
- 是否需要多个实例：比如一个页面里有两个独立计数器 → 必须用 Composable；
- 是否多人协作或长期维护：mixins 的隐式合并会让新成员难以快速理解数据流向 → 推荐 Composable；
- 是否已用 Composition API 开发：混入与 setup 语法混合使用会破坏逻辑一致性，强行加 mixins 反而增加认知负担。
Vue3 官方文档明确建议：新项目、新功能、重构模块，优先采用组合式函数。mixins 不是被废弃，而是被更可控的方式取代。
迁移 mixins 到组合式函数其实很直接
以分页逻辑为例：
- 原 mixin 中的
pageNum、pageSize、handlePageChange，可直接封装进usePagination()； - 把
fetchList()改为接收回调函数参数，或用事件总线/emit 解耦，不再强求子组件实现； - 组件内只需
const { pageNum, pageSize, gotoPage } = usePagination()，逻辑即插即用，无副作用。
不是推倒重来，而是把原来“塞进组件”的逻辑，变成“拿过来用”的函数——结构没变，但掌控感完全不同。
