vue 3 逻辑复用通过自定义 hook（以 use 开头，存于 src/composables/）封装“状态+操作+副作用”，职责单一、可插拔、可组合；组件仅需导入解构调用，实现逻辑下沉、代码精简与高效维护。
Vue 3 中逻辑复用通过自定义 Hook 提取公共代码，核心是把“相关联的状态 + 操作 + 副作用”打包成一个独立函数，再在多个组件中直接调用。它不是简单地把代码剪切粘贴，而是按业务逻辑切分，让每个 Hook 只干一件事、职责清晰、可插拔。
明确要封装的逻辑边界
先识别哪些代码反复出现且高度相似：比如分页列表里的 loading、数据、页码、搜索参数、请求方法；又比如表单里的校验规则、错误提示、提交状态。这些不是零散变量或方法，而是一组有内在联系的功能单元。
- 避免把 UI 相关内容（如 class 名、模板结构）塞进去
- 不硬编码接口地址或字段名，改用参数传入（如 fetchApi、initialPage）
- 一个 Hook 只处理一个关注点，例如 usePagination 不负责校验，useFormRules 不管理请求
用 Composition API 组织内部逻辑
在 Hook 函数里直接使用 ref、computed、watch、onMounted 等响应式 API，所有返回值天然响应式。不需要额外处理，也不依赖组件实例。
- 状态用 ref 或 reactive 定义（如 const loading = ref(false)）
- 副作用如事件监听、定时器、请求取消，用 onMounted/onUnmounted/watch 管理生命周期
- 方法直接定义为普通函数，闭包内访问并修改内部状态
- 最后统一 return 一个对象，暴露给组件使用的属性和方法
规范命名与存放位置
约定大于配置。名字以 use 开头（如 useTableData），驼峰命名，语义明确；文件统一放在 src/composables/ 下，便于查找和维护。
- 组件中只需一行导入：import { useTableData } from '@/composables/useTableData'
- 解构使用简洁直观：const { data, loading, search, reset } = useTableData({ fetchApi: api.getUserList })
- 多个 Hook 可自由组合，互不影响，比如同时用 useLoading 和 useDebounce
实际效果：组件变薄，逻辑变活
原来一个列表组件可能有 300 行，混着数据、方法、watch、mounted；现在 setup 里只剩 5–10 行调用和少量页面特有逻辑，其余全部下沉到 Hook。新增页面时，复制粘贴变成导入调用，改一处，处处生效。
- 调试更聚焦：查分页问题，只看 usePagination.js，不用在三个组件里来回翻
- 测试更容易：Hook 是纯函数，可单独写单元测试，不依赖 Vue 实例
- 团队协作更顺：新人看组件 setup，一眼看出用了哪些能力模块，而不是陷入 methods 海洋
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
