【SOLID原则前端中的应用】接口隔离原则（Interface Segregation Principle，ISP）- vue3示例

接口隔离原则（Interface Segregation Principle，ISP）在Vue 3中的应用

接口隔离原则（Interface Segregation Principle，ISP）规定，客户端不应该被迫依赖于它不使用的方法。
换句话说，我们应该避免创建包含过多职责的“胖接口”，而应该创建细粒度的接口，使得每个接口只包含客户端实际需要的方法。

在Vue 3中，这可以通过将组件的职责分解成更小的、功能单一的组件来实现。
下面的示例，展示如何在Vue 3中应用接口隔离原则。

示例场景：用户信息展示和编辑

在这里插入图片描述

假设有一个组件，需要展示和编辑用户信息。
按照接口隔离原则，将这个需求分解成两个独立的组件：一个负责展示用户信息（UserDisplay.vue），另一个负责编辑用户信息（UserEdit.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>

2. 用户信息编辑组件 `UserEdit.vue`

这个组件只负责编辑用户的信息。

<!-- UserEdit.vue -->
<template><div class="user-edit"><label for="name">Name:</label><input id="name" v-model="localUser.name" /><label for="email">Email:</label><input id="email" v-model="localUser.email" /><button @click="saveUser">Save</button></div></template><script>import { ref, watch, toRefs } from 'vue';export default {name: 'UserEdit',props: {user: {type: Object,required: true}},setup(props, { emit }) {const { user } = toRefs(props);const localUser = ref({ ...user.value });watch(user, (newUser) => {localUser.value = { ...newUser };}, { deep: true });const saveUser = () => {emit('save', localUser.value);};return {localUser,saveUser};}};</script><style scoped>.user-edit {display: flex;flex-direction: column;gap: 10px;}label {margin-bottom: 5px;}input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;}button {padding: 10px;border: none;border-radius: 4px;background-color: #007bff;color: white;cursor: pointer;}</style>

3. 使用组件

在父组件中组合使用 UserDisplay 和 UserEdit 组件。

<!-- App.vue -->
<template><div id="app"><UserDisplay :user="user" /><UserEdit :user="user" @save="handleSave" /></div>
</template><script>
import { ref } from 'vue';
import UserDisplay from './components/UserDisplay.vue';
import UserEdit from './components/UserEdit.vue';export default {name: 'App',components: {UserDisplay,UserEdit},setup() {const user = ref({name: 'John Doe',email: 'john.doe@example.com'});const handleSave = (updatedUser) => {user.value = updatedUser;};return {user,handleSave};}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>