设计模式，说白了就是写代码的“套路”。用好了，你的代码就能更健壮，更易于维护。几乎所有应用都会遇到一些共性问题，设计模式就像一个宝库，提供了很多经过验证的解决方案。

可关于 Vue 中的设计模式，很多人都说不清道不明。尤其是 Vue 独有的设计模式，更是少有人提及。

今天，我就来给大家分享 12 种 Vue 设计模式，每个模式都附带一个简单的例子，让你快速上手！

这只是个开胃菜，想要深入学习，还需要花更多时间研究！

1. 数据存储模式

对于很多状态管理问题来说，最简单的解决方案是使用可组合函数来创建一个可共享的数据存储。

这种模式包含几个部分：

1. 全局状态单例
2. 导出部分或全部状态
3. 用于访问和修改状态的方法

下面是一个简单的例子：

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

2. 轻量级可组合函数

轻量级可组合函数引入了额外的抽象层，将反应式管理与核心业务逻辑分离。这里我们使用纯 JavaScript 或 TypeScript 来实现业务逻辑，以纯函数的形式表示，并在其上添加了一层轻量级的反应式。

<scriptsetuplang="ts"> import{ ref, watch }from'vue'; import{ convertToFahrenheit }from'./temperatureConversion'; exportfunctionuseTemperatureConverter(celsiusRef: Ref<number>){ constfahrenheit = ref(0);

watch(celsiusRef, (newCelsius) => { // 实际逻辑包含在一个纯函数中 fahrenheit.value = convertToFahrenheit(newCelsius);
}); return{ fahrenheit };
}</script>

3. 谦逊组件模式

谦逊组件的设计理念是简单，专注于展示和用户输入，将业务逻辑放在其他地方。

遵循“属性向下，事件向上”的原则，这些组件确保数据流清晰、可预测，使其易于重用、测试和维护。

<template> <divclass="max-w-sm rounded overflow-hidden shadow-lg"> <imgclass="w-full":src="userData.image"alt="User Image"/> <divclass="px-6 py-4"> <divclass="font-bold text-xl mb-2"> {{ userData.name }} </div> <pclass="text-gray-700 text-base"> {{ userData.bio }} </p> </div> <divclass="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> <scriptsetup> defineProps({userData:Object,
}); constemitEditProfile =()=>{
emit('edit-profile');
};</script>

4. 提取条件逻辑

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

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

5. 提取可组合函数

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

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

<scriptsetuplang="ts"> import{ ref, watch }from'vue'; exportfunctionuseExampleLogic(initialValue: number){ constcount = ref(initialValue); constincrement =()=>{
count.value++;
}; constdecrement =()=>{
count.value--;
};

watch(count, (newValue, oldValue) => { console.log(`Count changed from${oldValue}to${newValue}`);
}); return{ count, increment, decrement };
}</script>

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

6. 列表组件模式

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

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

<!-- 之前：在父组件中直接使用 v-for --> <template> <divv-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 --> <scriptsetup> importuseTasksfrom'./composables/useTasks'; // 可组合函数包含业务逻辑 const{ tasks, addTask, removeTask } = useTasks(); </script> <template> <!-- 谦逊组件提供 UI --> <TaskInput@add-task="addTask"/> <TaskList:tasks="tasks"@remove-task="removeTask"/> </template>

9. 策略模式

策略模式非常适合处理 Vue 应用程序中复杂的条件逻辑。

它允许根据运行时条件在不同组件之间动态切换，从而提高代码的可读性和灵活性。

<template> <component:is="currentComponent"/> </template> <scriptsetup>import{ computed }from'vue'; importComponentOnefrom'./ComponentOne.vue'; importComponentTwofrom'./ComponentTwo.vue'; importComponentThreefrom'./ComponentThree.vue'; constprops = defineProps({ conditionType:String,
}); constcurrentComponent = computed(()=>{ switch(props.conditionType) { case'one': returnComponentOne; case'two': returnComponentTwo; case'three': returnComponentThree; default: returnDefaultComponent;
}
});</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> <scriptsetup> 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>

总结

学习 Vue 设计模式，就像学习一门新的语言，能够让你更深入地理解 Vue 的工作原理，写出更健壮、更灵活、更可扩展的代码。

希望这篇文章能让你对 Vue 设计模式有一个更深的了解，并帮助你在实际开发中应用这些技巧，写出更优秀的 Vue 代码！