同学们好，我是 Eugene（尤金），一个拥有多年中后台开发经验的前端工程师~

（Eugene 发音很简单，/juːˈdʒiːn/，大家怎么顺口怎么叫就好）

你是否也有过：明明学过很多技术，一到关键时候却讲不出来、甚至写不出来？

你是否也曾怀疑自己，是不是太笨了，明明感觉会，却总差一口气？

就算想沉下心从头梳理，可工作那么忙，回家还要陪伴家人。

一天只有24小时，时间永远不够用，常常感到力不从心。

技术行业，本就是逆水行舟，不进则退。

如果你也有同样的困扰，别慌。

从现在开始，跟着我一起心态归零，利用碎片时间，来一次彻彻底底的基础扫盲。

这一次，我们一起慢慢来，扎扎实实变强。

不搞花里胡哨的理论堆砌，只分享看得懂、用得上的前端干货，

咱们一起稳步积累，真正摆脱“面向搜索引擎写代码”的尴尬。

一、先搞清楚一个问题：我们到底在解决什么？

写 Vue 项目久了，你一定遇到过这些场景：

• 好几个页面都有表格 + 分页 + 搜索，每个页面都写一遍 currentPage、pageSize、total、loading、tableData……
• 好几个弹窗表单都要做打开/关闭、表单校验、提交、重置，每次都 copy 一坨。
• 几乎所有接口调用都要处理 loading、error、retry，到处重复 try-catch。

核心问题就一个字：重复。

但重复本身不是最可怕的，可怕的是：

1. 改一个逻辑要改 N 个地方（漏改一个就是 bug）
2. 逻辑散落在 data、methods、watch、mounted 各处，跟读小说一样要来回翻页
3. 新人接手看不懂，老人自己过半年也看不懂

所以我们需要一种方式，把可复用的有状态逻辑抽出来，做到：写一次、用 N 次、改一处、全生效。

在 Vue2 时代，官方给的方案叫 Mixin。
在 Vue3 时代，官方推荐的方案叫 Composables（组合式函数）。

二、Vue2 Mixin：能用，但有"三宗罪"

2.1 Mixin 是什么？

简单说：Mixin 就是一个普通的 Vue 组件选项对象，可以包含 data、methods、computed、watch、生命周期等任何组件选项。当你把它"混入"到一个组件里时，这些选项会和组件自身的选项合并。

2.2 一个典型的例子：分页逻辑复用

假设我们有很多列表页，都需要分页，先看不用 Mixin 时你要在每个页面写的东西：

// PageA.vue
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  methods: {
    async fetchList() {
      this.loading = true
      try {
        const res = await api.getListA({
          page: this.currentPage,
          size: this.pageSize
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } finally {
        this.loading = false
      }
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchList()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.fetchList()
    }
  },
  created() {
    this.fetchList()
  }
}

PageB、PageC…… 全是这套。唯一不同的就是 api.getListA 换成 api.getListB。

用 Mixin 抽出来：

// mixins/pagination.js
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  methods: {
    // 子组件必须自己实现这个方法，返回接口调用的 Promise
    fetchList() {
      throw new Error('组件必须实现 fetchList 方法')
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchList()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.fetchList()
    }
  },
  created() {
    this.fetchList()
  }
}

// PageA.vue
import paginationMixin from '@/mixins/pagination'

export default {
  mixins: [paginationMixin],
  methods: {
    async fetchList() {
      this.loading = true
      try {
        const res = await api.getListA({
          page: this.currentPage,
          size: this.pageSize
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } finally {
        this.loading = false
      }
    }
  }
}

看起来不错对吧？确实能复用了。但用久了你就会遇到 Mixin 的三宗罪。

2.3 Mixin 的三宗罪

第一宗：来源不明（"这变量哪来的？"）

<template>
  <div>
    
    <span>第 {{ currentPage }} 页，共 {{ total }} 条span>
    
    <span>{{ userName }}span>
  div>
template>

<script>
import paginationMixin from '@/mixins/pagination'
import userMixin from '@/mixins/user'

export default {
  mixins: [paginationMixin, userMixin],
  // 你在 data、methods 里完全看不出 currentPage 和 userName 从哪来
  // IDE 也没法跳转到定义，只能靠人肉去翻 mixin 文件
}
script>

当你引了 2-3 个 mixin，模板里用的变量来源就成了悬案。新人接手的时候更是一脸懵。

第二宗：命名冲突（"我的变量被吞了"）

// mixins/pagination.js
export default {
  data() {
    return { loading: false }  // 表格加载状态
  }
}

// mixins/auth.js
export default {
  data() {
    return { loading: false }  // 权限校验加载状态
  }
}

// SomePage.vue
export default {
  mixins: [paginationMixin, authMixin],
  data() {
    return { loading: false }  // 提交按钮加载状态
  }
  // 三个 loading 打架了！
  // Vue2 的合并策略：组件自身的 data 优先，后面的 mixin 覆盖前面的
  // 最终只有一个 loading，另外两个的逻辑全乱了
  // 而且——不会报任何错误或警告！
}

这是 Mixin 最要命的问题。项目小的时候还好，项目大了、mixin 多了，命名冲突几乎是必然的，而且是静默的——不报错、不警告，直接覆盖，等你发现 bug 的时候已经不知道要查到什么时候了。

第三宗：不灵活（"我想用两份分页怎么办？"）

// 如果一个页面有两个独立的表格，各自有各自的分页呢？
// Mixin 混进来就是一份，没法实例化两份
export default {
  mixins: [paginationMixin], // 只有一份 currentPage、total……
  // 第二个表格的分页数据怎么办？再写一遍？那还要 mixin 干嘛？
}

Mixin 本质上是对象合并，不是函数调用，所以你没法像调函数一样"new 两份出来"。

2.4 小结

三、Vue3 Composables：函数的胜利

3.1 核心思想：一切皆函数

Vue3 的 Composition API 给了我们一个极其简单但极其强大的模式：

把有状态的逻辑写成一个普通函数，函数里用 ref/reactive 创建响应式状态，最后 return 出去。

就这么简单。没有什么新 API、新概念，就是函数。

// composables/useCounter.js —— 最简单的例子
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  function reset() {
    count.value = initialValue
  }

  return { count, increment, decrement, reset }
}

使用的时候：

<template>
  <button @click="incrementA">A: {{ countA }}button>
  <button @click="incrementB">B: {{ countB }}button>
template>

3.2 对比 Mixin，三宗罪全解了

3.3 命名约定

Vue 社区有一个约定俗成的规范（也是 Vue 官方文档推荐的）：

• 文件名：useXxx.js 或 useXxx.ts
• 函数名：useXxx，以 use 开头
• 放置位置：项目中统一放在 composables/ 或 hooks/ 目录下

src/
├── composables/         # 或叫 hooks/
│   ├── useRequest.js    # 通用请求封装
│   ├── useTable.js      # 表格逻辑封装
│   ├── useForm.js       # 表单逻辑封装
│   ├── useLoading.js    # 加载状态封装
│   └── index.js         # 统一导出
├── views/
├── components/
└── ...

四、实战封装一：useRequest —— 一切的基础

4.1 为什么先封装它？

因为 useTable 要请求数据，useForm 要提交数据，几乎所有业务逻辑都绕不开接口调用。把请求逻辑封装好了，后面的封装都会轻松很多。

4.2 先想清楚：一个接口调用需要管理哪些状态？

别急着写代码，先列需求：

1. data    —— 接口返回的数据
2. loading —— 是否正在请求中（控制按钮 loading、骨架屏等）
3. error   —— 请求失败的错误信息
4. 手动触发 / 自动触发 —— 有的接口进页面就要调，有的要点按钮才调
5. 防重复 —— 快速点击不要发 N 个请求

4.3 最小可用版本（V1）

先写一个最简单的版本，能跑起来：

// composables/useRequest.js  V1 - 最小可用版
import { ref } from 'vue'

/**
 * 通用请求封装
 * @param {Function} apiFn - 接口函数，需返回 Promise
 * @param {Object} options - 配置项
 * @param {boolean} options.immediate - 是否立即执行，默认 false
 * @param {any} options.initialData - data 的初始值，默认 null
 */
export function useRequest(apiFn, options = {}) {
  const {
    immediate = false,
    initialData = null
  } = options

  const data = ref(initialData)
  const loading = ref(false)
  const error = ref(null)

  async function run(...args) {
    loading.value = true
    error.value = null
    try {
      const res = await apiFn(...args)
      data.value = res
      return res
    } catch (err) {
      error.value = err
      throw err  // 继续抛出，让调用方可以 catch
    } finally {
      loading.value = false
    }
  }

  // 如果配置了 immediate，创建时就调一次
  if (immediate) {
    run()
  }

  return { data, loading, error, run }
}

使用示例：

<template>
  <div v-loading="loading">{{ userInfo?.name }}div>
  <button :loading="submitLoading" @click="handleSubmit">提交button>
template>

4.4 进阶版本（V2）：加上防重复和竞态处理

V1 有两个隐患：

1. 防重复：用户快速点击提交按钮，会同时发出多个请求
2. 竞态：用户快速切换筛选条件，先发的请求后返回，会覆盖掉后发请求的正确数据

// composables/useRequest.js  V2 - 加防重和竞态处理
import { ref } from 'vue'

export function useRequest(apiFn, options = {}) {
  const {
    immediate = false,
    initialData = null,
    // 新增：是否在 loading 中时阻止重复调用（适用于提交类接口）
    preventRepeat = false
  } = options

  const data = ref(initialData)
  const loading = ref(false)
  const error = ref(null)

  // 用一个自增 id 来处理竞态
  // 每次调用 run 时 id + 1，回调时检查 id 是否是最新的
  // 如果不是最新的，说明在这次请求还没返回时，又发了新的请求
  // 那这次的结果就应该被丢弃
  let requestId = 0

  async function run(...args) {
    // 防重复：如果正在请求中，直接返回
    if (preventRepeat && loading.value) {
      return
    }

    const currentId = ++requestId
    loading.value = true
    error.value = null

    try {
      const res = await apiFn(...args)
      // 竞态处理：只有最新一次请求的结果才会被赋值
      if (currentId === requestId) {
        data.value = res
      }
      return res
    } catch (err) {
      if (currentId === requestId) {
        error.value = err
      }
      throw err
    } finally {
      if (currentId === requestId) {
        loading.value = false
      }
    }
  }

  if (immediate) {
    run()
  }

  return { data, loading, error, run }
}

竞态问题的具体场景，举个例子：

用户操作：选"北京" → 选"上海"（很快切换）

请求时序：
  请求A（北京）发出 ──────────────────> 请求A返回（北京的数据）
  请求B（上海）发出 ────> 请求B返回（上海的数据）

如果不处理竞态：
  页面先显示上海数据（正确），然后被北京数据覆盖（错误！）

处理竞态后：
  请求A返回时发现 currentId !== requestId，丢弃结果
  页面始终显示上海数据（正确）

这个问题在实际开发中出现频率很高，但很多人意识不到。面试也经常问。

4.5 踩坑提醒

坑 1：忘了 finally 重置 loading

//  错误写法
async function run(...args) {
  loading.value = true
  try {
    const res = await apiFn(...args)
    data.value = res
    loading.value = false  // 如果上面报错了，这行不会执行！
  } catch (err) {
    error.value = err
    // 忘了在这里也重置 loading → 页面永远转圈
  }
}

//  正确写法：用 finally
async function run(...args) {
  loading.value = true
  try {
    const res = await apiFn(...args)
    data.value = res
  } catch (err) {
    error.value = err
  } finally {
    loading.value = false  // 不管成功失败都会执行
  }
}

坑 2：immediate: true 的时候传参

//  这样拿不到参数
const { data } = useRequest(
  (id) => getDetail(id),
  { immediate: true }
)
// immediate 调用 run() 时没传 id，接口会报错

//  用闭包把参数包进去
const { data } = useRequest(
  () => getDetail(route.params.id),
  { immediate: true }
)

五、实战封装二：useTable —— 中后台的半壁江山

5.1 分析需求

中后台项目里，表格页面占了至少一半。一个标准的表格页面需要：

1. 表格数据（tableData）
2. 分页状态（currentPage、pageSize、total）
3. 加载状态（loading）
4. 搜索/筛选参数（searchParams）
5. 查询方法（搜索、重置、翻页、切换每页条数）
6. 进页面自动加载第一页

5.2 完整实现

// composables/useTable.js
import { ref, reactive, onMounted } from 'vue'

/**
 * 表格逻辑封装
 * @param {Function} apiFn - 列表接口函数
 *   接收参数格式：apiFn({ page, size, ...searchParams })
 *   返回格式约定：{ list: [], total: 0 }
 * @param {Object} options - 配置项
 */
export function useTable(apiFn, options = {}) {
  const {
    defaultPageSize = 10,
    immediate = true,
    // 让调用方可以自定义如何从接口返回值中提取 list 和 total
    // 因为每个项目的接口返回格式可能不同
    formatResult = (res) => ({
      list: res.data?.list ?? res.data?.records ?? [],
      total: res.data?.total ?? 0
    })
  } = options

  // ---- 状态定义 ----
  const tableData = ref([])
  const loading = ref(false)
  const pagination = reactive({
    currentPage: 1,
    pageSize: defaultPageSize,
    total: 0
  })

  // 搜索参数，用 reactive 方便直接 v-model 绑定表单
  const searchParams = reactive({})

  // ---- 核心方法 ----

  /** 加载数据 */
  async function fetchData() {
    loading.value = true
    try {
      const params = {
        page: pagination.currentPage,
        size: pagination.pageSize,
        ...searchParams
      }
      const res = await apiFn(params)
      const { list, total } = formatResult(res)
      tableData.value = list
      pagination.total = total
    } catch (err) {
      console.error('[useTable] fetchData error:', err)
      tableData.value = []
      pagination.total = 0
    } finally {
      loading.value = false
    }
  }

  /** 搜索（重置到第一页） */
  function search() {
    pagination.currentPage = 1
    fetchData()
  }

  /** 重置搜索条件并查询 */
  function reset() {
    // 清空 searchParams 的所有字段
    Object.keys(searchParams).forEach(key => {
      searchParams[key] = undefined
    })
    pagination.currentPage = 1
    fetchData()
  }

  /** 翻页 */
  function onPageChange(page) {
    pagination.currentPage = page
    fetchData()
  }

  /** 切换每页条数 */
  function onSizeChange(size) {
    pagination.pageSize = size
    pagination.currentPage = 1  // 切换条数要回到第一页
    fetchData()
  }

  /** 刷新当前页（不改变任何条件） */
  function refresh() {
    fetchData()
  }

  // ---- 初始化 ----
  if (immediate) {
    onMounted(() => {
      fetchData()
    })
  }

  // ---- 返回 ----
  return {
    tableData,
    loading,
    pagination,
    searchParams,
    search,
    reset,
    refresh,
    onPageChange,
    onSizeChange,
    fetchData
  }
}

5.3 使用示例（完整页面）

<template>
  <div class="page-container">
    
    <el-form inline @submit.prevent="search">
      <el-form-item label="用户名">
        <el-input v-model="searchParams.username" placeholder="请输入用户名" clearable />
      el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchParams.status" placeholder="请选择" clearable>
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        el-select>
      el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询el-button>
        <el-button @click="reset">重置el-button>
      el-form-item>
    el-form>

    
    <el-table :data="tableData" v-loading="loading" border>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ row.status === 1 ? '启用' : '禁用' }}
          el-tag>
        template>
      el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除el-button>
        template>
      el-table-column>
    el-table>

    
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="onPageChange"
      @size-change="onSizeChange"
      style="margin-top: 16px; justify-content: flex-end;"
    />
  div>
template>

<script setup>
import { getUserList } from '@/api/user'
import { useTable } from '@/composables/useTable'

const {
  tableData,
  loading,
  pagination,
  searchParams,
  search,
  reset,
  refresh,
  onPageChange,
  onSizeChange
} = useTable(getUserList)

// 页面自身的业务逻辑
function handleEdit(row) {
  // 打开编辑弹窗...
}

async function handleDelete(row) {
  await ElMessageBox.confirm('确认删除？')
  await deleteUser(row.id)
  ElMessage.success('删除成功')
  refresh()  // 删除后刷新当前页
}
script>

对比一下：如果不用 useTable，这个页面的