Vue3 组合式 API 上手实践

2021 年如果还在做前端，几乎不可能绕开 Vue3。真正让大家开始认真讨论它的，不只是性能，而是组合式 API 终于给复杂页面的逻辑组织带来了一种更顺手的写法。

在中后台项目里，一个页面通常会同时包含：

• 列表查询
• 表单编辑
• 弹窗状态
• 权限控制
• 表格操作

如果全部靠传统 Options API 往 data、methods、computed 里塞，页面很容易越写越分散。组合式 API 的最大价值，就是让“同一块业务逻辑重新聚合到一起”。

复杂逻辑终于能按功能收拢

比如一个文章管理页，分页、筛选、刷新列表这些逻辑，本来就属于同一组能力。用组合式 API，可以自然抽到一个 composable 里。

import { ref } from 'vue';

export function usePostList() {
  const list = ref([]);
  const loading = ref(false);
  const page = ref(1);

  async function fetchList() {
    loading.value = true;
    try {
      list.value = await api.getPostList({ page: page.value });
    } finally {
      loading.value = false;
    }
  }

  return {
    list,
    loading,
    page,
    fetchList,
  };
}

这类抽法在 2021 年开始变得特别实用，因为团队终于可以把页面逻辑做成可复用单元，而不只是复制组件代码。

它最适合中后台，不只是适合 Demo

很多人初看 Vue3，会以为 Composition API 只是写法变了。真正进入项目后才会发现，它对中后台特别友好：

• 逻辑复用粒度更细
• 页面职责更容易拆分
• TypeScript 支持更自然

这三点对长期维护的项目都很关键。

不要为了新而新

我不建议把所有页面一夜之间都改成 Composition API。更稳的方式是：

• 新页面优先用 Vue3 新写法
• 公共能力先抽 composable
• 老页面按需迁移

这样既能享受新能力，也不会把重构风险一下拉满。

小结

Vue3 组合式 API 在 2021 年真正打动人的地方，不是它“更新”，而是它让复杂页面的逻辑终于有了更清晰的组织方式。对中后台这种长期项目来说，这种变化非常有价值。