如何学习Vue设计模式

Vue 设计模式是 Vue.js 框架中用于解决常见问题的可复用解决方案。这些模式帮助开发者更有效地组织和管理代码，提升代码的可维护性、可扩展性和可读性。以下是一些常见的 Vue 设计模式：

1. 数据存储模式

可组合函数：用于创建可共享的数据存储，包含全局状态、单例导出部分或全部状态用于访问和修改状态的方法

<script setup lang="ts">
import { reactive, toRefs, readonly } from 'vue';
import { themes } from './utils';// 1. 在模块作用域中创建全局状态，在每次使用此可组合函数时共享
const state = reactive({darkMode: false,sidebarCollapsed: false,// 2. 此主题值对该可组合函数保持私有theme: 'nord',
});export default () => {// 2. 仅暴露部分状态// 使用 toRefs 允许我们共享单个值const { darkMode, sidebarCollapsed } = toRefs(state);// 3. 修改我们的基础状态const changeTheme = (newTheme) => {if (themes.includes(newTheme)) {// 仅在它是一个有效主题时更新state.theme = newTheme;}};return {// 2. 只返回部分状态darkMode,sidebarCollapsed,// 2. 仅暴露状态的只读版本theme: readonly(state.theme),// 3. 我们返回一个修改基础状态的方法changeTheme,};
};
</script>

2. 轻量级可组合函数

将反应式管理与核心业务逻辑分离，使用纯 JavaScript 或 TypeScript 实现业务逻辑，并在其上添加一层轻量级的反应式。

<script setup lang="ts">import { ref, watch } from 'vue';import { convertToFahrenheit } from './temperatureConversion';export function useTemperatureConverter(celsiusRef: Ref<number>) {const fahrenheit = ref(0);watch(celsiusRef, (newCelsius) => {// 实际逻辑包含在一个纯函数中fahrenheit.value = convertToFahrenheit(newCelsius);});return { fahrenheit };}
</script>

3. 谦逊组件模式

谦逊组件的设计理念是简单，专注于展示和用户输入，将业务逻辑放在其他地方，遵循“属性向下，事件向上”的原则，确保数据流清晰、可预测，使其易于重用、测试和维护。

<template><div class="max-w-sm rounded overflow-hidden shadow-lg"><img class="w-full" :src="userData.image" alt="User Image" /><div class="px-6 py-4"><div class="font-bold text-xl mb-2">{{ userData.name }}</div><p class="text-gray-700 text-base">{{ userData.bio }}</p></div><div class="px-6 pt-4 pb-2"><button@click="emitEditProfile"class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit Profile</button></div></div>
</template><script setup>
defineProps({userData: Object,
});const emitEditProfile = () => {emit('edit-profile');
};
</script>

4. 提取条件逻辑

为了简化包含多个条件分支的模板，我们将每个分支的内容提取到单独的组件中。这可以提高代码的可读性和可维护性。

<!-- 之前 --><template><div v-if="condition"><!-- 真实条件下的大量代码 --></div><div v-else><!-- 假设条件下的大量代码 --></div>
</template><!-- 之后 --><template><TrueConditionComponent v-if="condition" /><FalseConditionComponent v-else />
</template>

5. 提取可组合函数

将逻辑提取到可组合函数中，即使是单次使用的场景也是如此。可组合函数可以简化组件，使其更容易理解和维护。

它们还有助于添加相关方法和状态，例如撤销和重做功能。这有助于我们将逻辑与 UI 分开。

<script setup lang="ts">
import { ref, watch } from 'vue';export function useExampleLogic(initialValue: number) {const count = ref(initialValue);const increment = () => {count.value++;};const decrement = () => {count.value--;};watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});return { count, increment, decrement };
}
</script>

<template><div class="flex flex-col items-center justify-center"><button@click="decrement"class="bg-blue-500 text-white p-2 rounded">Decrement</button><p class="text-lg my-4">Count: {{ count }}</p><button@click="increment"class="bg-green-500 text-white p-2 rounded">Increment</button></div>
</template><script setup lang="ts">
import { useExampleLogic } from './useExampleLogic';const { count, increment, decrement } = useExampleLogic(0);
</script>

6. 列表组件模式

组件中的大型列表会导致模板混乱和难以管理。解决方案是将 v-for 循环逻辑抽象到一个子组件中。

这可以简化父组件，并将迭代逻辑封装在专门的列表组件中，保持整洁。

<!-- 之前：在父组件中直接使用 v-for --><template><div v-for="item in list" :key="item.id"><!-- 每个项目的代码 --></div>
</template><!-- 之后：将 v-for 抽象到子组件中 --><template><NewComponentList :list="list" />
</template>

7. 保留对象模式

将整个对象传递给组件，而不是单个属性，可以简化组件并使其更具未来可扩展性。

然而，这种方法可能会造成对对象结构的依赖，因此不太适合通用组件。

<!-- 使用整个对象 --><template><CustomerDisplay :customer="activeCustomer" />
</template><!-- CustomerDisplay.vue --><template><div><p>Name: {{ customer.name }}</p><p>Age: {{ customer.age }}</p><p>Address: {{ customer.address }}</p></div>
</template>

8. 控制器组件

Vue 中的控制器组件弥合了 UI（谦逊组件）和业务逻辑（可组合函数）之间的差距。

它们管理状态和交互，协调应用程序的整体行为。

<!-- TaskController.vue -->
<script setup>
import useTasks from './composables/useTasks';// 可组合函数包含业务逻辑
const { tasks, addTask, removeTask } = useTasks();
</script><template><!-- 谦逊组件提供 UI --><TaskInput @add-task="addTask" /><TaskList :tasks="tasks" @remove-task="removeTask" />
</template>

9. 策略模式

策略模式非常适合处理 Vue 应用程序中复杂的条件逻辑。它允许根据运行时条件在不同组件之间动态切换，从而提高代码的可读性和灵活性。在 Vue 的路由系统中，使用策略模式处理不同的导航行为，例如重定向、别名等。

<template><component :is="currentComponent" />
</template><script setup>
import { computed } from 'vue';
import ComponentOne from './ComponentOne.vue';
import ComponentTwo from './ComponentTwo.vue';
import ComponentThree from './ComponentThree.vue';const props = defineProps({conditionType: String,
});const currentComponent = computed(() => {switch (props.conditionType) {case 'one':return ComponentOne;case 'two':return ComponentTwo;case 'three':return ComponentThree;default:return DefaultComponent;}
});
</script>

10. 隐藏组件模式

隐藏组件模式涉及根据组件的使用方式，将复杂组件拆分成更小、更专注的组件。

如果不同的属性集是独占地一起使用的，则表明可以将组件进行拆分。

<!-- 重构之前 --><template><!-- 实际上是一个“图表”组件 --><DataDisplay:chart-data="data":chart-options="chartOptions"/><!-- 实际上是一个“表格”组件 --><DataDisplay:table-data="data":table-settings="tableSettings"/>
</template><!-- 重构之后 --><template><Chart :data="data" :options="chartOptions" /><table :data="data" :settings="tableSettings" />
</template>

11. 内部交易模式

内部交易模式解决了 Vue 中父组件和子组件过度耦合的问题。通过在必要时将子组件内联到父组件中，我们可以进行简化。

这个过程可以使组件结构更加连贯，减少碎片化。

<!-- ParentComponent.vue --><template><div><!-- 这个组件使用来自父组件的所有内容。它起什么作用呢？ --><ChildComponent:user-name="userName":email-address="emailAddress":phone-number="phoneNumber"@user-update="(val) => $emit('user-update', val)"@email-update="(val) => $emit('email-update', val)"@phone-update="(val) => $emit('phone-update', val)"/></div>
</template><script setup>
defineProps({userName: String,emailAddress: String,phoneNumber: String,
});defineEmits(['user-update', 'email-update', 'phone-update']);
</script>

12. 长组件模式

什么算作“过长”的组件？

当它变得难以理解时。

长组件原则鼓励创建自文档化、命名清晰的组件，提高代码质量和可理解性。

<!-- 之前：一个冗长且复杂的组件 -->
<template><div><!-- 大量 HTML 和逻辑 --></div>
</template><!-- 之后：分解成更小的组件，名称告诉你代码的作用。 -->
<template><ComponentPartOne /><ComponentPartTwo />
</template>