vue 3 用组合式函数替代混入，核心是显式调用替代隐式注入：每个函数职责单一（如 usepagination）、命名规范（use 开头）、状态隔离、依赖透明、类型友好，彻底解决混入的命名冲突、隐式依赖与类型缺失问题。

Vue 3 中用组合式函数替代组件混入（Mixin），核心是把“隐式注入”变成“显式调用”，让逻辑来源清晰、命名可控、类型友好。不是简单换个写法，而是重构复用逻辑的组织方式。

明确拆分关注点，按业务功能封装

混入的问题在于把不同职责的数据和方法强行塞进同一个对象，合并时容易打架。组合式函数则要求你先想清楚：这个逻辑到底在解决什么问题？比如“列表分页”和“表单校验”绝不混在一个函数里。

• 每个组合式函数只做一件事：usePagination 处理页码、size、跳转；useFormRules 只管规则定义和校验触发；useRequest 专注请求发起、loading 控制、错误拦截
• 函数名必须以 use 开头，如 useCountdown、useDarkMode，这是约定，也是类型推导和工具识别的基础
• 内部用 ref/reactive 定义状态，用 computed 暴露派生值，用 watch 处理副作用，用 onMounted/onUnmounted 绑定生命周期

解构即声明，彻底规避命名冲突

混入的命名冲突源于 Vue 的扁平合并机制——多个混入都定义 loading，谁后加载谁生效。组合式函数完全绕开这个问题：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• 你在组件中写 const { loading, data, fetch } = useTable()，loading 就只属于这个函数调用，跟其他函数返回的 loading 完全无关
• 解构时可任意重命名：const { loading: tableLoading } = useTable()，或直接不取：const { data, fetch } = useTable()
• 没有“全局 this 上挂属性”这回事，所有变量都来自函数返回值，来源一目了然

显式传参 + 显式返回，依赖关系透明

混入之间常有隐式依赖，比如 A Mixin 调用了 B Mixin 提供的 cancelToken，但模板里看不到关联。组合式函数强制你把依赖“说出来”：

• 需要外部数据就通过参数传入：useSearch(searchConfig)、useForm(initialData)
• 需要协同多个逻辑，就在 setup 里依次调用：const { page, changePage } = usePagination() 和 const { list, loading } = useRequest(fetchList, { immediate: true })
• 返回值就是接口契约，组件只消费它暴露的内容，不关心内部怎么实现

配合 TypeScript，自动补全与类型安全一步到位

混入在 TS 中几乎无法获得准确类型提示，而组合式函数天然支持：

• 函数签名可完整标注入参和返回值类型，VS Code 直接给出精准补全
• 返回的对象结构清晰，解构时 IDE 能立刻识别字段类型和是否可选
• 修改函数返回结构时，所有调用处会立刻报错，而不是运行时报 undefined

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