掌握 SOLID，Vue 代码更优雅，维护更轻松！

颜战天
299 阅读4分钟

在 Vue（包含不限于） 项目开发中，想使代码更优雅、易于扩展和维护，持续回首性优秀，你就不能不知道 SOLID 原则！

SOLID 原则是面向对象编程中的五大基本原则，它们能帮助我们构建可维护、可扩展、低耦合的代码。虽然最早用于后端，但在前端（特别是 Vue/React 开发）中，同样有很多应用场景。这些原则包括：

  • Single Responsibility Principle (单一职责)

  • Open-Closed Principle (开闭原则)

  • Liskov Substitution Principle (里氏替换原则)

  • Interface Segregation Principle (接口隔离)

  • Dependency Inversion Principle (依赖倒置)

本文将逐一讲解这些原则，并给出具体的 Vue 代码案例，帮助你让 Vue 项目更易维护，更易扩展！快来一起看看吧。

1. 单一职责原则（Single Responsibility Principle, SRP）

原则：

一个类/组件/模块只应该有一个引起它变化的原因，即一个模块应该只负责一项职责。

⚠️ 违背 SRP 的情况： 在 Vue 组件开发中，如果一个组件负责UI 渲染、数据请求、业务逻辑处理等多个职责，那它就变得臃肿，难以维护。

✅ Vue 组件拆分优化

❌ 不符合 SRP（一个组件做太多事情）

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <button @click="fetchUser">获取用户信息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    async fetchUser() {
      const res = await fetch("https://api.example.com/user");
      this.user = await res.json();
    }
  }
};
</script>

⚠️ 问题：

  • 这个组件既负责 UI 也负责数据请求，违反了单一职责原则。

✅ 拆分后（符合 SRP）

<!-- User.vue (UI 组件) -->
<template>
  <div>
    <h2>{{ user.name }}</h2>
    <button @click="fetchUser">获取用户信息</button>
  </div>
</template>

<script>
import useUser from "./useUser"; // 引入封装的逻辑

export default {
  setup() {
    const { user, fetchUser } = useUser(); // 复用数据逻辑
    return { user, fetchUser };
  }
};
</script>

// useUser.js (数据逻辑)
import { ref } from "vue";

export default function useUser() {
  const user = ref({});

  async function fetchUser() {
    const res = await fetch("https://api.example.com/user");
    user.value = await res.json();
  }

  return { user, fetchUser };
}

✅ 优化后：

  • User.vue 只负责 UI，
  • useUser.js 负责数据逻辑，
  • 职责分离，便于复用！ 🎯

2. 开闭原则（Open-Closed Principle, OCP）

原则：

对扩展开放，对修改封闭。
意思是： 不要直接修改已有代码，而是通过扩展的方式添加新功能。

⚠️ 违背 OCP 的情况：

  • 直接修改现有组件，而不是使用继承、组合、扩展等方式进行增强。

✅ Vue 组件扩展优化

❌ 不符合 OCP（直接修改组件）

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  props: ["title", "content"]
};
</script>

⚠️ 如果需要支持 Markdown ？需要修改原组件！

✅ 符合 OCP（使用插槽扩展）

<template>
  <div>
    <h2><slot name="title">{{ title }}</slot></h2>
    <p><slot name="content">{{ content }}</slot></p>
  </div>
</template>

<script>
export default {
  props: ["title", "content"]
};
</script>

✅ 这样，如果需要 Markdown，只需扩展而不修改原组件！

<CustomCard>
  <template v-slot:title>
    <h2 style="color: red;">🔥 Markdown Title</h2>
  </template>
  <template v-slot:content>
    <p><strong>Markdown 内容</strong></p>
  </template>
</CustomCard>

🚀 好处：原组件不变，增强功能更灵活！

3. 里氏替换原则（Liskov Substitution Principle, LSP）

原则：

子类可以替换父类，但不会改变父类的行为。
即： 继承时，子类必须保持父类的行为一致，不能破坏原有功能。

⚠️ 违背 LSP 的情况：

  • 子类重写父类方法后，行为变得不可预测。

✅ Vue 组件继承优化

❌ 不符合 LSP

class Button {
  click() {
    console.log("Button clicked");
  }
}

class ToggleButton extends Button {
  click() {
    console.log("Toggle action");
  }
}

⚠️ 问题：子类 ToggleButton 改变了 click() 的行为，可能导致调用者困惑。

✅ 符合 LSP（使用组合代替继承）

<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  props: ["label", "onClick"],
  methods: {
    handleClick() {
      if (this.onClick) this.onClick();
    }
  }
};
</script>

✅ 这样，按钮行为是可预测的，增强功能时不会破坏已有逻辑！

4. 接口隔离原则（Interface Segregation Principle, ISP）

原则：

不要让一个接口承担过多职责，而应拆分成多个更小的接口。
即： 组件应该只依赖自己真正需要的功能。

⚠️ 违背 ISP 的情况：

  • 组件 props 过多，不必要的参数导致耦合。

✅ Vue 组件优化

❌ 不符合 ISP

<template>
  <button :disabled="disabled" @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  props: ["text", "disabled", "loading", "size"]
};
</script>

⚠️ 如果 loading 只用于某些按钮，应该拆分！

✅ 符合 ISP（拆分不同按钮组件）

<!-- BaseButton.vue -->
<template>
  <button :disabled="disabled" @click="onClick">{{ text }}</button>
</template>

<script>
export default {
  props: ["text", "disabled", "onClick"]
};
</script>

<!-- LoadingButton.vue -->
<template>
  <BaseButton :text="loading ? '加载中...' : text" :disabled="loading" />
</template>

<script>
import BaseButton from "./BaseButton.vue";

export default {
  components: { BaseButton },
  props: ["text", "loading"]
};
</script>

✅ 不同组件职责单一，避免 props 过载！

5. 依赖倒置原则（Dependency Inversion Principle, DIP）

原则：

高层模块不应该依赖低层模块，而是都应该依赖于抽象。
即： 组件不应该直接依赖具体实现，而应该依赖抽象（例如使用 Vue 插件、事件总线、Pinia 代替直接调用方法）。

✅ Vue 中应用：

  • 使用 Vue 插件（Pinia 代替直接调用 API）
  • 使用依赖注入 provide/inject
  • 使用事件总线 mitt

总结

SOLID 原则Vue 应用示例
单一职责（SRP）拆分 UI 和业务逻辑（useUser.js）
开闭原则（OCP）通过插槽扩展组件，不修改原组件
里氏替换（LSP）组合优于继承，保持组件行为一致
接口隔离（ISP）拆分大组件，避免 props 过载
依赖倒置（DIP）使用 provide/inject、Pinia 代替直接依赖

🚀 掌握 SOLID 原则，让你的 Vue 代码更加优雅、可维护、易扩展。希望这些案例能帮助你写出更高质量的代码！

avatar
文章
阅读
粉丝