12 种 Vue 设计模式

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

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

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

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

1. 数据存储模式

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

这种模式包含几个部分：

1. 全局状态单例

2. 导出部分或全部状态

3. 用于访问和修改状态的方法

下面是一个简单的例子：

<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 应用程序中复杂的条件逻辑。

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

<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>

总结

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

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

本文来自：前端开发博客，转载请先联系宝哥授权。

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

往期推荐

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

程序员必备：9 个超赞的速查表网站，2024 年开发效率翻倍！

Tailwind CSS v4.0 Alpha 发布：更快、更强大、更现代！

Vue 状态管理：从Vuex到Pinia，Vue 3官方推荐的状态管理库深度解析

Vue 如何处理异步组件加载错误

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

微软 Edge 推出 "WebUI 2.0"：从 React 到 Web Components + HTML，速度提升了42%

我是前端宝哥，每日分享前端开发技术，关注下面二维码，围观我的朋友圈。

备注【文章群】可以进文章分享群，

备注【技术群】可以进技术交流群，

备注【副业群】可以进程序员副业群。

关注下方公众号加星标，送我的电子书资料

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书

觉得好看，请关注我，点“在看”