兄弟们，2026年了，如果你还在用Vue2的Options API（选项式API）写大型项目，那维护起来绝对是一场噩梦。逻辑分散在data、methods、computed里，改一个功能得在代码里上下反复横跳，简直就是“面条代码”。今天就来聊聊，怎么用Vue3的<script setup>和组合式API（Composables），把复杂的业务逻辑抽离成干净、可复用的Hooks，让你的代码像搭积木一样清爽。

核心痛点：逻辑碎片化与复用困难

以前写一个带有搜索、分页、表格数据的后台页面，相关的状态和方法往往散落在组件的各个角落。如果想把这套逻辑复用到另一个页面，只能靠混入（Mixins），结果导致命名冲突和数据来源不清晰，调试起来让人抓狂。

实战方案：组合式API的逻辑抽离

Vue3的组合式API允许我们按照“业务功能”来组织代码，而不是按照“选项类型”。我们可以把通用的逻辑抽离成独立的useXxx函数（也就是前端界的Hooks）。

代码实战：抽离一个带分页的列表逻辑

1<!-- 业务组件页面：UserList.vue -->
2<template>
3  <div>
4    <input v-model="searchQuery" placeholder="搜索用户" />
5    <button @click="fetchUsers">搜索</button>
6    <ul>
7      <li v-for="user in userList" :key="user.id">{{ user.name }}</li>
8    </ul>
9    <div>
10      第 {{ currentPage }} 页，共 {{ totalPages }} 页
11      <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
12      <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
13    </div>
14  </div>
15</template>
16
17<script setup>
18import { ref } from 'vue'
19// 引入我们抽离好的逻辑 Hooks
20import { usePaginatedList } from '@/hooks/usePaginatedList'
21
22const searchQuery = ref('')
23
24// 直接解构出需要的状态和方法，逻辑清晰明了
25const { 
26  list: userList, 
27  currentPage, 
28  totalPages, 
29  fetchList: fetchUsers, 
30  changePage 
31} = usePaginatedList('/api/users', { pageSize: 10 })
32</script>

1// 核心逻辑抽离：hooks/usePaginatedList.js
2import { ref } from 'vue'
3import axios from 'axios'
4
5export function usePaginatedList(apiUrl, defaultParams = {}) {
6  const list = ref([])
7  const currentPage = ref(1)
8  const totalPages = ref(1)
9  const loading = ref(false)
10
11  const fetchList = async (params = {}) => {
12    loading.value = true
13    try {
14      const res = await axios.get(apiUrl, { 
15        params: { ...defaultParams, ...params, page: currentPage.value } 
16      })
17      list.value = res.data.items
18      totalPages.value = res.data.totalPages
19    } finally {
20      loading.value = false
21    }
22  }
23
24  const changePage = (page) => {
25    if (page < 1 || page > totalPages.value) return
26    currentPage.value = page
27    fetchList()
28  }
29
30  // 初始化加载第一页
31  fetchList()
32
33  // 返回给组件使用的状态和方法
34  return { list, currentPage, totalPages, loading, fetchList, changePage }
35}

避坑指南

• 响应式丢失：从组合式函数中解构 ref 或 reactive 对象时，一定要保持其响应式特性。在 <script setup> 中直接解构是没问题的，但如果在普通的 <script> 或 JS 文件中，切记不要直接解构 reactive 对象的属性，否则会变成普通变量。
• 命名规范：抽离的组合式函数建议统一以 use 开头（如 useUser, useTable），这样一眼就能看出它是包含响应式状态的逻辑复用单元。

总结：Vue3的组合式API不仅仅是语法的改变，更是前端逻辑组织思维的升级。掌握了它，你的大型项目代码将变得前所未有的整洁与易维护。