---
name: tencentblueking/Vue 3 组合式函数最佳实践 (Composables)
source: https://app.decimal.ai/s/tencentblueking-vue-3-composables@1/SKILL.md
source_sha256: b86766a7e9c4
---

# Vue 3 组合式函数最佳实践

为了避免在每个页面重复编写分页、Loading 和请求逻辑，我们推荐使用 Composables。

## 1. useTable (列表页神器)

封装了分页、加载状态、数据获取的通用逻辑。**一行代码搞定所有表格逻辑**。

**使用方式：**
```typescript
const { loading, data, pagination, handlePageChange, handleLimitChange } = useTable(getHostList);
```

**配合 bk-table：**
```html
<bk-table
  :data="data"
  :pagination="pagination"
  v-bkloading="{ isLoading: loading }"
  remote-pagination
  @page-change="handlePageChange"
  @page-limit-change="handleLimitChange"
>
  <bk-table-column prop="name" label="名称" />
</bk-table>
```

> 📦 获取完整 Hook 实现：`skill://vue-composables/assets/useTable.ts`


---
## 📦 可用资源

- `skill://vue-composables/assets/useTable.ts`

> 根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载