Vue 3逻辑复用应优先使用Composition API自定义Hook，通过解构显式引入规避命名冲突；不同Hook同名变量天然隔离，推荐对象命名法（如api.loading）杜绝重复解构；迁移Mixin时应分层替换并显式传参。

Vue 3 中逻辑复用应优先绕开 Mixins，直接采用 Composition API 的自定义 Hook（即组合函数），这是官方推荐且从根本上规避命名冲突的路径——因为变量和方法通过解构显式引入，冲突在编译/开发阶段即可暴露，而非运行时静默覆盖。

用具名 Hook 替代全局混入

把通用逻辑封装为独立函数，如 useApi、useFormValidation、usePermission，每个 Hook 返回明确的对象结构：

• 调用时必须解构，例如 const { loading, fetchData } = useApi()，若组件中已存在 loading，解构会直接报错或需重命名（const { loading: apiLoading, fetchData } = useApi()）
• 不同 Hook 的同名变量天然隔离，useSearch().query 和 useCart().query 互不影响
• Hook 内部可自由使用任意变量名，无需加前缀，语义清晰、无污染

拒绝在 setup 中直接展开多个 Hook

避免写成 const { loading, error, data } = useApi(); const { loading, form, submit } = useForm(); ——这会导致重复解构报错。正确做法是：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 为每个 Hook 的返回值单独命名对象，如 const api = useApi(); const form = useForm();
• 访问时带作用域前缀：api.loading、form.submit，来源一目了然，也杜绝冲突
• 配合 TypeScript，IDE 可精准提示各对象的属性与类型，调试和重构更安全

遗留 Mixins 迁移时的过渡策略

若 Vue 2 项目升级中仍有 Mixins，不建议“修修补补”，而应分层替换：

立即学习“前端免费学习笔记（深入）”；

• 新功能一律用 Hook 实现，旧组件逐步抽取逻辑为 Hook，在 setup 中替代 mixins 选项
• 对含多个 Mixins 的复杂组件，先用 const { ... } = useLegacyMixinA() 封装单个 Mixin，再逐个替换，降低风险
• 禁用 ...useXXX() 展开语法，坚持对象命名法，既保持可读性，又为后续拆分留出空间

不依赖隐式约定，所有依赖显式声明

Mixins 的隐患常来自“组件需预设某个 data 字段供 mixin 使用”。Hook 则强制显式传参：

• useLogger({ target: 'user-profile' }) 明确指定上下文，不假设组件有 this.pageName
• useFetch(url, { immediate: true }) 所有配置项作为参数传入，无隐藏依赖
• 组件内部状态变更（如 url 改变）通过响应式引用或事件通知 Hook，而非靠同名字段“碰巧”触发