大家好，我是大华。今天想和大家聊聊在真实项目里我是怎样把「设计模式」这把钥匙，插进 Vue3 + TypeScript 的大门，让枯燥的业务逻辑瞬间变得清晰、有条不紊的。

先抛个问题：当你面对一个页面需要统一添加 token、统一错误处理，还要兼顾后期功Neng迭代时是不是常常感到代码像一团乱麻？

答案其实hen直接——缺少抽象和复用的思维。Ru果把每一次需求dou写成「硬编码」的函数，久而久之维护成本会呈指数级增长。设计模式恰好提供了一套经过验证的组织方式，让我们Ke以在保持业务灵活性的同时把「重复」和「易错」的地方压缩到Zui小。

Vue3 本身Yi经为我们提供了 Composition API、Pinia 等现代化工具，但这些工具并不等同于“解决方案”。真正的“优雅”来自于如何把这些工具组合成一种可预见、易 的结构——这正是 GoF提出的 23 种经典模式要Zuo的事。

举个例子，电商系统里不同会员等级对应不同折扣。Ru果把所有 if/else 写在页面里一改折扣就要改好多文件。使用策略模式，只需要新增或修改一个策略对象即可。

// src/utils/discount.ts
type DiscountKey = 'normal' | 'vip' | 'svip';
const discountMap: Recordnumber> = {
  normal: price => price * 0.9,
  vip:    price => price * 0.8,
  svip:   price => price * 0.7,
};
export function calcPrice: number {
  const fn = discountMap;
  return fn ? fn : price;
}

页面只负责调用：

这样一来新增「黄金会员」只需要往 discountMap 加一行，业务层根本不感知。

假设所有请求dou要显示 loading 并自动注入 token，又想保持调用方简洁，这时候Ke以用装饰者包装 fetch。

// src/utils/api.ts
function withLoadingPromise:T {
  return async function {
    console.log;
    try {
      const res = await fn;
      return res;
    } finally {
      console.log;
    }
  } as T;
}
async function rawPost{
  const resp = await fetch(url,{
    method:'POST',
    headers:{
      'Content-Type':'application/json',
      'Authorization':`Bearer ${localStorage.getItem||''}`
    },
    body:JSON.stringify
  });
  const json = await resp.json;
  if throw new Error;
  return json.data;
}
export const api = new Proxy({},{
  get{
    // @ts-ignore
    return withLoading=>rawPost);
  }
});

使用时只需：

弹窗类 UI 在后台管理系统里屡见不鲜，手写每个弹窗会导致大量重复代码。下面演示一个轻量化的弹窗工厂。

// src/factories/modal-factory.ts
import { shallowRef } from 'vue';
import Alert from '@/components/Alert.vue';
import Confirm from '@/components/Confirm.vue';
export type ModalType = 'alert' | 'confirm';
export function createModal{
  const Comp = shallowRef;
  Comp.value = type==='alert'?Alert:Confirm;
  return { ModalComponent:Comp };
}

登录态需要全局共享，却又不想每次dou去 localStorage 拿，这时Ke以让 Pinia Store 本身充当单例。

// src/stores/user.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore=> {
  const info = ref({
    id:0,
    name:'',
    email:'',
    logged:false
  });
  function login{
    info.value={id:Date.now,name,email,logged:true};
    localStorage.setItem);
  }
  function logout{
    info.value={id:0,name:'',email:'',logged:false};
    localStorage.removeItem;
  }
  // 页面刷新时恢复
  const init==>{ 
     const raw=localStorage.getItem;
     if info.value=JSON.parse;
   };
   init;
   return {info,login,logout};
});

购物车数量变化后需要通知头部导航geng新。传统Zuo法是父子传值或 vuex，这里我们用极简 EventBus 来演示概念。

// src/utils/event-bus.ts
type Callback = =>void;
const bus:{:Callback}={};
export function emit{
   .forEach);
}
export function on{
   if bus=;
   bus.push;
}

商品页：

导航栏：

🛒 {{cartCount}}

需求驱动：真正决定使用哪种模式的是业务变化频率，而不是你手头上有什么书籍。

Simplicity first：Ru果一句 if Neng搞定，就不要急着搬出工厂或装饰者；但当相同逻辑出现三次以上，就该考虑抽象。

TDD 配合：Poor man's 单元测试Neng帮助你验证抽象是否真的解耦了例如对 .calcPrice, .api.xxx, .createModal` Zuo快照测试。

Coding style：Pnpm + Vite + ESLint + Prettier 是我的默认配置，保证所有人提交的代码风格一致，否则再好的设计也会被乱七八糟的排版埋没。

#小技巧：Koa 中间件式思路也Ke以迁移到 Vue 请求层，用数组组合多个拦截器，实现链式调用，非常像装饰者。

说真的，当我把上述几套模板正式落地到公司内部后台系统后Bug 报告下降了约37%，新功Neng上线所需的改动行数也从原来的两百行压缩到了不到八十行。geng重要的是新加入的小伙伴Neng够在三天内读懂项目结构，而不是花上两周才摸清楚「哪里加 token」。 Ru果你仍然对「设计模式」抱有抵触情绪，不妨先挑一个Zui贴近自己痛点的小模块尝试重构，一旦kan到那种“一改即全局生效”的爽快感，你会发现自己Yi经悄悄爱上它了。

回顾今天聊过的五大核心：Strategy、Decorator、Factory、Singleton+Pinia 与 Observer，每一种dou对应着前端项目中常见的一类痛点。记住**技术不是目的**，目的是让团队协作geng顺畅，让产品迭代geng快速。Ru果你现在还在手写一堆重复请求或硬编码业务规则，请给自己一次机会，把这些碎片化的代码交给成熟的「设计模型」去管理吧！祝大家编码愉快，也欢迎在评论区一起交流心得～ 🍻