【SOLID原则前端中的应用】定义及单一职责原则（Single Responsibility Principle，SRP）- vue3示例

定义

SOLID原则是面向对象编程中的五个设计原则的缩写，分别是：

1. 单一职责原则（Single Responsibility Principle）
2. 开闭原则（Open/Closed Principle）
3. 里氏替换原则（Liskov Substitution Principle）
4. 接口隔离原则（Interface Segregation Principle）
5. 依赖倒置原则（Dependency Inversion Principle）

---

单一职责原则（Single Responsibility Principle，SRP）在Vue 3中的应用

单一职责原则（Single Responsibility Principle，SRP）规定，一个类（或模块、组件）应该只有一个引起其变化的原因，即一个类只负责一项职责。
在Vue 3的开发中，我们可以通过将组件的职责分离来实现这一原则，使得每个组件只负责一项特定的功能，从而提升代码的可维护性和可读性。

示例场景：用户信息展示和数据获取

假设我们有一个需求，需要展示用户的信息，并在组件挂载时获取用户数据。
按照单一职责原则，我们将这个需求分成两个组件：

1. 一个负责展示用户信息（UserDisplay.vue）
2. 一个负责获取用户数据并传递给展示组件（UserContainer.vue）

1. 用户信息展示组件 UserDisplay.vue

这个组件只负责展示用户的信息。

<!-- UserDisplay.vue -->
<template>
  <div class="user-display">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDisplay',
  props: {
    user: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.user-display {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2. 数据获取和传递组件 UserContainer.vue

这个组件负责获取用户数据，并将数据传递给展示组件。

<!-- UserContainer.vue -->
<template>
  <div>
    <UserDisplay v-if="user" :user="user" />
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import UserDisplay from './UserDisplay.vue';

export default {
  name: 'UserContainer',
  components: {
    UserDisplay
  },
  data() {
    return {
      user: null
    };
  },
  async mounted() {
    const response = await fetch('https://xxx.com/users/1');
    const data = await response.json();
    this.user = data;
  }
};
</script>

<style scoped>
p {
  text-align: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3. 使用组件

在应用的根组件中使用 UserContainer。

<!-- App.vue -->
<template>
  <div id="app">
    <UserContainer />
  </div>
</template>

<script>
import UserContainer from './components/UserContainer.vue';

export default {
  name: 'App',
  components: {
    UserContainer
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

总结

在示例中，我们将用户信息展示的职责和数据获取的职责分离到两个不同的组件中：

1. UserDisplay.vue 只负责展示用户的信息，不关心数据是如何获取的。
2. UserContainer.vue 负责获取用户数据，并将数据传递给 UserDisplay.vue 进行展示。

通过这种方式，我们确保每个组件都有明确的职责，遵循了单一职责原则。这样做不仅使组件更加简洁、易于理解和测试，还可以在需要时更容易地对组件进行重用和维护。