Vue3 组合式函数（Composables）实战：逻辑拆分与封装 | 极客日志

JavaScript大前端

Vue3 组合式函数（Composables）实战：逻辑拆分与封装

介绍 Vue3 中如何通过组合式 API 和组合式函数（Composables）优化中后台页面开发。针对页面逻辑臃肿、复用性差的问题，提出将业务逻辑从组件中抽离到独立的 useXxx 函数中，实现视图与逻辑分离。通过人员列表页实战示例，展示了 ref/reactive 的使用、composable 的编写规范及项目结构组织方式，帮助开发者构建更清晰、易维护的前端代码。

moshang发布于 2026/4/5更新于 2026/4/131 浏览

Vue3 组合式函数（Composables）实战：逻辑拆分与封装

Vue3 组合式 API 与组合式函数：中后台人员列表页开发实战，从逻辑拆分思路到落地实操，避开页面逻辑臃肿、复用性差的高频坑！

在这里插入图片描述

一、先忘掉已知编码'模式'，想一个真实问题

假设现在要写一个人员列表页：

上面有搜索框（姓名、账号、手机号）
中间一个表格（数据 + 分页）
每一行有：编辑、分配角色、改密码、删除
点编辑/改密码/分配角色会弹出对话框

如果全写在一个 .vue 文件里，会怎样？

<template> 还好，主要是布局
<script> 里会堆满：搜索表单数据、表格数据、分页、好几个弹窗的显示/隐藏、每个按钮的点击函数、每个弹窗的确认/关闭……

一个文件动不动就 500 行、几十个变量和函数，改一处要翻半天，也不好复用。

所以我们要解决的是两件事：

把'逻辑'从'页面'里拆出来，让页面只负责'长什么样、点哪里'
拆出来的逻辑要能复用，比如别的页面也要'列表 + 分页 + 弹窗'时可以直接用

这种「逻辑从页面里抽出去、按功能组织、可复用」的写法，在 Vue 3 里就对应两样东西：

组合式 API：用 ref、reactive、onMounted 等写逻辑的方式
组合式函数（Composables） - 音标：/kəm'pəuzəblz/：把一段逻辑封装成一个'以 use 开头的函数'，在页面里调一下就能用

下面分步讲。

二、第一步：认识'组合式 API'（在页面里写逻辑）

以前 Vue 2 常见的是「选项式 API」：一个组件里分好几块 —— data、methods、mounted 等，逻辑按'类型'分，而不是按'功能'分。

Vue 3 的组合式 API 换了一种思路：在 setup（或 <script setup>）里，像写普通 JS 一样，用变量和函数把'和某块功能相关的所有东西'写在一起。

例如'搜索'这一块功能，可以这样写在一起：

// 和'搜索'相关的都放一起
const searchForm = reactive({ 
  userName: '', 
  userAccount: '' 
})
const handleSearch = () => {/* 调用接口、刷新列表 */}
const  = () => { 
  searchForm. = ; ...
}

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

const pagination = reactive({ 
  currentPage: 1, 
  pageSize: 10, 
  total: 0 
})
const handleSizeChange = (val) => {...}
const handleCurrentChange = (val) => {...}

// usePersonnelList.ts
import { ref, reactive } from 'vue'

export function usePersonnelList() {
  const searchForm = reactive({ 
    userName: '', 
    userAccount: '' 
  })
  const tableData = reactive([])
  const handleSearch = () => {...}
  const handleReset = () => {...}
  // ... 其他状态和方法
  return { 
    searchForm, 
    tableData, 
    handleSearch, 
    handleReset,
    // 页面要用啥就 return 啥 
  }
}

<script setup>
import { usePersonnelList } from './composables/usePersonnelList'

const { 
  searchForm, 
  tableData, 
  handleSearch, 
  handleReset, 
} = usePersonnelList()
</script>
<template>
  <!-- 用 searchForm、tableData，绑定 handleSearch、handleReset -->
</template>

当前看到的	含义（小白版）
`index.vue` 里只有 template + 一个 `usePersonnelList()`	页面只负责'长什么样'和'用哪一块逻辑'
`composables/usePersonnelList.ts`	人员列表这一页的'所有逻辑'都在这一个函数里
`components/PersonnelSearchForm.vue` 等	把表格、弹窗拆成小组件，只负责展示和发事件
`types.ts`	把共用的类型（Personnel、Role、表单类型等）集中放，方便复用和改