接口隔离原则（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>
解释
在示例中，我用户信息展示和编辑的职责分解成两个独立的组件：
UserDisplay.vue：这个组件只负责展示用户的信息，不包含任何编辑逻辑。UserEdit.vue：这个组件只负责编辑用户的信息，并包含保存逻辑。
通过这种方式，确保每个组件都有明确的职责，避免创建包含过多职责的“胖组件”。
这样做不仅使组件更加简洁、易于理解和测试，还可以在需要时更容易地对组件进行重用和维护。
在父组件 App.vue 中，我们组合使用了 UserDisplay 和 UserEdit 组件，分别负责展示和编辑用户信息。这种方式遵循了接口隔离原则，使得每个组件只依赖于它实际需要的方法和属性。
(unity Lab4))
