Vue.js组件逻辑复用首选use开头的Composable函数，支持TS和测试；跨层级共享用provide/inject；UI结构复用用renderless组件+作用域插槽；DOM行为封装用自定义指令。
Vue.js 组件逻辑复用，在 Composition API 下已形成清晰、安全、可维护的实践路径：核心是把业务逻辑封装成以 use 开头的函数（即 Composable），按需导入、解构调用，不再依赖隐式混入或模板侵入。
自定义 Hook（Composable）是首选方案
它把相关响应式状态、计算属性、副作用和方法打包成一个函数，返回明确结构，天然支持 TypeScript 和单元测试。
- 命名统一以 use 开头（如
useUserList、useFormRules），一眼识别其用途与响应式特性 - 可显式传参（如 API 地址、校验规则数组），避免隐式依赖；返回值结构清晰，解构时还能重命名防止冲突
- 生命周期钩子（
onMounted、onUnmounted）直接在函数内调用，逻辑闭环，不暴露给组件 - 支持嵌套调用——比如
useUserList()内部可复用useRequest()和usePagination()，层次分明
跨层级共享状态用 provide/inject
当多个子组件需要共用同一份上下文（如表单提交状态、权限配置、主题模式），不应靠 props 层层透传，而应结合 Composable 封装后通过 provide 注入。
- 父组件调用
useFormContext()获取状态和方法，再通过provide('form', context)下发 - 任意深层子组件用
const form = inject('form')拿到响应式对象，无需关心来源路径 - 注意：inject 返回值需用
toRef或computed包裹以保持响应性，避免解构丢失响应链
UI 结构复用优先选作用域插槽 + Renderless 组件
如果复用的是“数据获取 + 交互控制”，但样式和 DOM 结构完全由使用者决定，就该用 renderless 组件，而非把逻辑塞进 mixin 或 hook。
立即学习“前端免费学习笔记（深入）”；
- 组件本身不渲染任何 DOM，只管理状态（如弹窗开关、加载中、错误重试）并提供
v-slot透出数据和操作 - 例如
<use-modal><template isopen close>...</template></use-modal>，UI 完全自主 - 比 mixins 更易追踪数据流向，也更容易做 A/B 测试或主题切换，逻辑与视图边界清晰
DOM 行为封装交给自定义指令
仅适用于纯 DOM 操作类需求，比如聚焦、粘性定位、按钮权限禁用、图片懒加载等，不涉及业务状态管理。
- 指令接收
binding.value和el，适合挂载后自动执行、无需响应式联动的场景 - 不能替代组合式函数——表单校验规则、用户权限判断这类带状态的逻辑，必须放在
usePermission这类 hook 中 - 指令内部无法访问组件实例、ref 或 reactive 对象，能力受限，定位明确才用
