早点下班（Vue2.7版）：旧项目也能少写 40%+ 异步代码

前段我在文章 早点下班：在 Vue3 中少写 40%+ 的异步代码 中分享了自己开发的 vue-asyncx，当时就有同学问：那 Vue 2 的老项目呢？就在今天，它来了！

vue-asyncx 发布 v1.11.0 版本，该版本向前兼容 Vue 2.7，同样帮你秒减 40%+ 异步代码。写法用法与在 Vue 3 中一模一样，毫不妥协。

如果你还在维护 Vue 2.7 的老项目，每次写异步请求都要手动管理 loading、error、data，还要处理竞态问题。那这篇文章，可能就是你的「下班加速器」🚀

少说废话，先看代码！

🎯 先来看个最常见的详情页查询

<!-- 老项目里的经典异步三板斧 + watch 联动 -->
<template>
  <div>
    <div v-if="queryDetailLoading">加载中...</div>
    <div v-else-if="queryDetailError">加载失败：{{ queryDetailError.message }}</div>
    <div v-else>
      <h2>{{ detail.name }}</h2>
      <p>{{ detail.desc }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: { id: String },
  data() {
    return {
      detail: null,
      queryDetailLoading: false,
      queryDetailError: null
    }
  },
  created() {
    this.queryDetail()
  },
  watch: {
    id: function () {  
      this.queryDetail()
    },
  },
  methods: {
    async queryDetail() {
      this.queryDetailLoading = true
      this.queryDetailError = null
      try {
        // 💥 有坑：快速切换 id，旧请求返回覆盖新数据（竞态）
        this.detail = await queryDetailApi(this.id)
      } catch (e) {
        this.queryDetailError = e
      } finally {
        this.queryDetailLoading = false
      }
    }
  }
}
</script>

👆 这段代码，你是不是写过 10 遍、20 遍、100 遍？

别急，现在，这些样板代码可以一键消失了。

🔥 代码对比：少写 40%+ 是什么体验？

传统写法（~20 行）

export default {
  props: { id: String },
  data() {
    return {
      detail: null,
      queryDetailLoading: false,
      queryDetailError: null
    }
  },
  created() {
    this.queryDetail()
  },
  watch: {
    id: function () {  
      this.queryDetail()
    },
  },
  methods: {
    async queryDetail() {
      this.queryDetailLoading = true
      this.queryDetailError = null
      try {
        // 💥 有坑：快速切换 id，旧请求返回覆盖新数据（竞态）
        this.detail = await queryDetailApi(this.id)
      } catch (e) {
        this.queryDetailError = e
      } finally {
        this.queryDetailLoading = false
      }
    }
  }
}

vue-asyncx 写法（~8 行）✨

import { useAsyncData } from 'vue-asyncx'

export default {
  props: { id: String },
  setup(props) {
    const { 
      detail, 
      queryDetail, 
      queryDetailLoading, 
      queryDetailError 
    } = useAsyncData('detail', () => queryDetailApi(props.id), { 
      immediate: true,  // setup 执行时自动请求
      watch: () => props.id  // id 变化自动重新请求 + 竞态防护
    })
    return { detail, queryDetail, queryDetailLoading, queryDetailError }
  }
}

🎯 核心能力一览：

• ✅ 代码一屏变半屏，逻辑聚合在一起
• ✅ loading / error / data 自动绑定，响应式更新
• ✅ watch 依赖自动追踪：props.id 变化自动重新请求
• ✅ 竞态请求自动处理：快速切换 id 时，旧数据自动废弃，不串数据
• ✅ 支持手动触发 queryDetail()、防抖节流
• ✅ TypeScript 友好，智能类型推导

📦 两个核心 API，覆盖 90% 异步场景

1️⃣ useAsyncData：自动执行 + 数据绑定，查询类场景神器

import { useAsyncData } from 'vue-asyncx'

export default {
  props: { id: String },
  setup(props) {
    const { 
      detail,              // 异步数据（响应式）
      queryDetail,         // 手动查询函数（可选）
      queryDetailLoading,  // 加载状态
      queryDetailError,    // 错误状态
    } = useAsyncData('detail', () => queryDetailApi(props.id), {
      immediate: true,     // setup 执行时自动调用
      watch: () => props.id  // 监听 id 变化，自动重新请求
    })

    return { detail, queryDetail, queryDetailLoading, queryDetailError }
  }
}

✅ 适用场景：详情页加载、列表查询、参数变化自动刷新的数据获取

使用异步数据，就是 useAsyncData

2️⃣ useAsync：包装异步函数，自动管理状态

import { useAsync } from 'vue-asyncx'

export default {
  setup() {
    const { 
      submit,           // 包装后的异步函数（可直接绑定 @click）
      submitLoading,   // 加载状态（响应式）
      submitError,     // 错误状态（响应式）
    } = useAsync('submit', submitApi)

    return { submit, submitLoading, submitError }
  }
}

✅ 适用场景：表单提交、按钮操作、手动触发的异步任务

使用异步（函数），就是 useAsync

---

useAsyncData 和 useAsync 的首个参数实际上是变量名。

• 对于 useAsyncData，传入 'detail' 返回 detail、queryDetail、queryDetailLoading 等
• 对于 useAsync 传入 'submit' 返回 submit、submitLoading 等

这种命名约定方式在代码可读性、团队协作性上有巨大优势，且在 TS 加持下不损失开发效率。

进一步阅读：如何通过工程手段统一团队变量命名

🛠️ Vue 2.7 接入示例：详情页完整实战

常规详情信息获取 + 审批确认详情页

<!-- DetailPage.vue -->
<template>
  <div>
    <!-- 加载状态 -->
    <div v-if="queryDetailLoading" class="loading">
      <Spinner /> 加载中...
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="queryDetailError" class="error">
      <ErrorMsg :error="queryDetailError" />
      <button @click="queryDetail()">重试</button>
    </div>
    
    <!-- 数据展示 -->
    <div v-else class="detail">
      <h2>{{ detail.name }}</h2>
      <p>{{ detail.desc }}</p>
    </div>
    
    <!-- 确认操作 -->
    <button @click="confirm" v-loading="confirmLoading">确认</button>
  </div>
</template>

<script>
import { useAsyncData, useAsync } from 'vue-asyncx'
import { queryDetailApi, confirmApi } from '@/api/detail'

export default {
  props: { id: String },
  setup(props) {
    // 🎯 详情获取：一个调用搞定详情页查询 + 自动 watch + 竞态防护
    const { 
      detail, 
      queryDetail, 
      queryDetailLoading, 
      queryDetailError 
    } = useAsyncData('detail', () => queryDetailApi(props.id), {
      immediate: true,
      watch: () => props.id  // id 变化自动重新请求，旧请求自动取消
    })

    // 🎯 确认操作：手动触发的异步任务
    const { confirm, confirmLoading } = useAsync('confirm', 
      () => confirmApi(props.id).then(() => queryDetail())
    )

    return {
      detail,
      queryDetail,
      queryDetailLoading,
      queryDetailError,
      confirm,
      confirmLoading
    }
  }
}
</script>

用 Vue Options 实现相同功能：

• 代码量轻松翻一倍
• 代码交织、阅读需要上下跳转，无法做到：详情获取逻辑在一起，确认操作逻辑在一起

🚀 为什么支持 Vue 2.7？

很多团队不是不想升级 Vue 3，而是：

• 老项目重构成本高，业务迭代紧
• 老项目只是维护，偶尔有新需求，没有重构资源
• Vue 2.7 也能用 Composition API，够用了

vue-asyncx 想你所想，让旧项目也能享受异步管理的优雅。

• 用 options 也没有关系，加个 setup 属性，马上就能用，渐进式改造。
• 后期老项目升级 Vue 版本，API 一模一样，一行代码都不用改

为什么要迁移 setup，怎么迁移 setup，安利下我的文章：

• 为什么写 Vue 强烈建议用 Setup？除了复用，更是代码组织
• 别再写换皮 Options 了！Vue3 Setup 的真正用法是这3步升级

🧪 质量保障：敢在生产环境用的底气

很多人问：「新库稳不稳定？老项目敢不敢接？」

直接上数据👇

指标	数值	说明
📦 单元测试	300+	覆盖所有 API 边界场景
🌐 E2E 测试	10+	模拟真实用户使用流程
🔄 双版本测试	✅	Vue 2.7 / 3 相同测试用例、流程，确保行为一致
🤖 CI/CD	GitHub Actions	每次提交自动跑全量测试
📊 代码覆盖率	100%	分支/语句/函数全覆盖

🎯 基于这套测试体系，vue-asyncx：

• 在多个产线项目大规模使用，日调用 2w+，稳如老狗 🐶
• 在单个大型项目中，总共 900+ .vue 文件，有 300+ .vue 文件使用超 500+ 次
• 发布 2 年，20+ 版本更新，接口零破坏性变更（做兼容，我是认真的）

🔜 后续预告：兼容背后的「技术狠活」

支持双版本不是 if (vue2) {...} else {...} 那么简单。
后续我会深度拆解 双版本兼容的测试架构与实现方案——包括兼容策略选型、同一套用例双环境跑通、无头浏览器 E2E 验证、低版本 TS 适配等。

💡 如果你对这类“技术狠活”感兴趣，记得点个关注，更新不迷路～

🙋 现在就能试试！

npm install vue-asyncx

📚 文档 & 示例：
👉 GitHub: vue-asyncx
👉 NPM: vue-asyncx

版本要求：vue-asyncx 目前最低兼容到 Vue 2.7

💬 互动时间

1️⃣ 你的项目还在用 Vue 2.7 吗？详情页查询是不是也写过类似的 watch + 竞态防护？
2️⃣ 对双版本兼容方案有什么好奇的？评论区聊聊👇

✅ 觉得有用，别忘了：
⭐ 点个 Star 支持开源
👍 点赞 + 收藏，下次找得到
🔄 转发给还在手写 loading + watch 的同事，一起早点下班！