Vue3+TypeScript实现策略模式Vue3+TypeScript实现策略模式：电脑升级的灵活选择术一、策略模式

Vue3+TypeScript实现策略模式：电脑升级的灵活选择术

一、策略模式是什么？

想象你经营一家电脑组装店，客户想升级电脑，可以选择“高性能处理器套餐”或“超大内存套餐”。每种套餐的升级方式不同，但客户只想说：“给我来个高性能的！” 策略模式就像你的“升级服务台”：将每种升级方案封装成独立策略，客户可以随意切换，核心逻辑不受影响。

核心角色：

策略接口：定义升级方案的标准接口。
具体策略类：实现具体的升级方案，如处理器升级或内存升级。
上下文：电脑升级服务，持有策略引用，负责调用具体升级方案。
客户端：客户，选择策略并交给服务台执行。

我们用Vue3+TypeScript实现一个前端版的“电脑升级系统”，让你边升级电脑边学策略模式！

二、代码实现

1. 策略接口与具体策略

// src/strategies/UpgradeStrategy.ts
export interface UpgradeStrategy {
  upgrade(computer: string): string;
}

// src/strategies/CpuUpgradeStrategy.ts
export class CpuUpgradeStrategy implements UpgradeStrategy {
  upgrade(computer: string): string {
    return `🚀 为${computer}升级高性能处理器：Intel i9-13900K，性能飙升！`;
  }
}

// src/strategies/MemoryUpgradeStrategy.ts
export class MemoryUpgradeStrategy implements UpgradeStrategy {
  upgrade(computer: string): string {
    return `🚀 为${computer}升级超大内存：64GB DDR5，运行如飞！`;
  }
}

幽默讲解：UpgradeStrategy是升级服务的“标准菜单”，规定每种套餐必须能升级电脑。CpuUpgradeStrategy和MemoryUpgradeStrategy就像店里的“处理器套餐”和“内存套餐”，一个装上顶级处理器，另一个塞满超大内存，客户想要啥就给啥！

2. 上下文类

// src/strategies/ComputerUpgrader.ts
import { UpgradeStrategy } from './UpgradeStrategy';

export class ComputerUpgrader {
  private strategy: UpgradeStrategy;

  setStrategy(strategy: UpgradeStrategy): void {
    this.strategy = strategy;
  }

  performUpgrade(computer: string): string {
    if (!this.strategy) {
      return '😅 请先选择升级策略！';
    }
    return this.strategy.upgrade(computer);
  }
}

幽默讲解：ComputerUpgrader是店里的“升级服务台”，客户选好套餐（策略），它就按套餐方案升级电脑。想换套餐？随时设置新策略，服务台无缝切换！

3. Vue3组件：升级服务界面

// src/components/ComputerUpgrader.vue
<script setup lang="ts">
import { ref } from 'vue';
import { ComputerUpgrader } from '../strategies/ComputerUpgrader';
import { CpuUpgradeStrategy, MemoryUpgradeStrategy } from '../strategies/UpgradeStrategy';

const computer = ref('游戏笔记本');
const strategyType = ref('cpu');
const upgradeResult = ref('');

const upgrader = new ComputerUpgrader();

const performUpgrade = () => {
  const strategy = strategyType.value === 'cpu' ? new CpuUpgradeStrategy() : new MemoryUpgradeStrategy();
  upgrader.setStrategy(strategy);
  upgradeResult.value = upgrader.performUpgrade(computer.value);
};
</script>

<template>
  <div>
    <h2>电脑升级服务站</h2>
    <div>
      <label>电脑型号：</label>
      <input v-model="computer" placeholder="输入电脑型号" />
    </div>
    <div>
      <label>升级套餐：</label>
      <select v-model="strategyType">
        <option value="cpu">高性能处理器套餐</option>
        <option value="memory">超大内存套餐</option>
      </select>
    </div>
    <button @click="performUpgrade">执行升级</button>
    <p>{{ upgradeResult }}</p>
  </div>
</template>

幽默讲解：这个Vue组件就像店里的“升级点单机”，客户选好电脑型号和升级套餐（处理器或内存），点一下“执行升级”，策略模式自动切换到对应方案，瞬间搞定！换个套餐？改个选项，点单机立马跟上！

三、应用场景

策略模式在Vue3开发中就像“电脑升级的套餐菜单”，非常适合以下场景：

动态组件行为：为Vue组件切换渲染逻辑（如不同图表类型：柱状图、折线图、饼图）。
表单验证：根据输入类型切换验证规则（如邮箱、电话、密码）。
接口请求处理：在不同接口或数据格式（如JSON、XML）间切换，不改核心逻辑。
主题切换：动态应用不同UI主题（如暗黑、明亮），通过策略切换样式。

幽默例子：你的Vue3项目是个电脑升级店，客户想要游戏笔记本装高性能处理器？选处理器策略！想要多开程序塞满内存？换内存策略！客户（代码）只管挑，策略模式负责送货！

四、适用性

策略模式适合以下前端场景：

多种算法切换：需要在不同算法或行为间切换（如排序、渲染）。
动态行为调整：根据用户输入或条件，动态改变对象行为。
解耦逻辑：将业务规则与核心应用隔离，方便切换或扩展。

注意事项：

如果只有单一策略，直接实现可能更简单。
策略过多可能导致代码膨胀，保持策略专注。

五、注意事项

策略设计：
- 策略接口保持简单，专注单一职责。
- 确保策略可互换，不破坏上下文逻辑。
TypeScript优势：
- 用接口（interface）定义策略契约，保证类型安全。
- 利用类型检查，避免错误分配策略。
性能考虑：
- 策略切换有轻微开销，避免简单任务复杂化。
- 缓存常用策略，减少实例化成本。
Vue3生态：
- 参考VueUse的工具函数（如useToggle）学习动态行为切换。
- 结合Vue的响应式API（如ref、reactive），优化策略状态管理。

幽默提示：别让策略模式变成“升级店的万能菜单”，选项太多客户挑花眼（代码混乱）！选对场景，策略模式让你的升级服务顺滑如丝！

六、总结

策略模式就像前端开发中的“电脑升级点单机”，通过封装算法实现灵活切换，不影响核心代码。在Vue3+TypeScript项目中，它适合动态组件行为、验证规则或接口处理。策略模式让你的代码像自选套餐一样，客户随心挑，开发随心换！