呆鸟译Py呆鸟的Python数据分析

12 种 Vue 设计模式

2024-07-22  本文已影响0人  呆鸟的简书

对我来说，设计模式曾经是个谜，在看招聘说明时经常看到它，比如下面这两张图，就是随便翻某聘时看到的，但好长一段时间，我都没太理解啥是设计模式，只觉得它挺高大上的。

招聘要求中的设计模式1 招聘要求中的设计模式2

后来听一位大咖介绍什么是设计模式，我觉得他讲得挺好。他说，设计模式其实就是套路，你写代码写多了，发现有好多情况可以用类似的代码来解决，经过不断提炼和优化，大家见了纷纷学之，这样的代码架构就成了套路，也就是所谓的设计模式。

好的设计模式能让你的代码质量更高、更简洁，毕竟是经过大家千锤百炼之后得到公认的。这也就是为什么好多企业在招聘时需要你熟悉设计模式。

只不过，虽然不少图书或教程都介绍过 JS 或 TS 的设计模式，但有关 Vue 应用开发的设计模式的内容却很少。但这不代表 Vue 就没有设计模式，恰恰相反，Vue 还有不少个性化的设计模式。

虽然现在大家动不动就说前端已死，但搞前端开发的同学们还是得靠它吃饭啊，尤其是 Vue，作为国内前端开发的主流框架，更是前端必备的技能。为了帮大家更好地捧好这个饭碗，今天学研群就给大家整理了一篇文章，先粗浅地介绍一下 Vue 的设计模式，共有 12 种，并附上了示例代码，展示这些设计模式的工作原理，供大家参考和学习。

这篇文章是我为前端同学推出的一篇长文，也是我想推出的前端学习系列的第一篇文章，欢迎大家多留言，提出建议（如果你不想留言，点个赞也成，这样我也好知道你们是不是对这方面的内容感兴趣，就当是个小调研吧），如果大家喜欢，我后期会继续推出更多类似的内容。

再多说一句，我非常认真地对待每一篇文章，尽力给大家提供更好的阅读体验和更实用的知识，希望能和大家一起在开发学习的道路上共同进步。

1. 数据存储模式

解决状态管理最简单的方法是使用组合式函数创建共享的数据存储。

这种模式分为以下几种情况。

示例如下。

import { reactive, toRefs, readonly } from 'vue';
import { themes } from './utils';

// 在模块作用域中创建全局状态，每次使用组合式函数时都会共享
const state = reactive({
  darkMode: false,
  sidebarCollapsed: false,

// theme 的值在组合式函数中为私有
  theme: 'nord',
});

export default () => {
  // 只暴露部分状态
  // 使用 toRefs 分享单个值
  const { darkMode, sidebarCollapsed } = toRefs(state);

  // 修改底层状态
  const changeTheme = (newTheme) => {
    if (themes.includes(newTheme)) {
      // 仅在存在该主题时才更新
      state.theme = newTheme;
    }
  }

  return {
    // 仅返回部分状态
    darkMode,
    sidebarCollapsed,
    // 仅暴露状态的只读版本
    theme: readonly(state.theme),
    // 返回修改底层状态的方法
    changeTheme,
  }
}

2. 轻组合式函数

轻组合式函数引入了额外的抽象层，把核心业务逻辑与响应式管理分离开来。这种模式使用 JS 或 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 };
}

3. 谦卑组件模式

所谓谦卑（humble），在这里可以理解为组件要谦逊，一个组件只专注实现一个功能，别逞能，不要在一个组件中实现过多的功能，这样才能让组件的复用、测试与维护更加容易。

这种模式要求组件专注于页面呈现与用户输入，不要处理业务逻辑。依据该模式设计的组件代码更易懂，预测数据流也更加容易。

<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 与业务逻辑。

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

<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">
    <!-- 这里是一堆针对 item 的代码 -->
  </div>
</template>

<!-- 把 v-for 相关的代码提取到子组件中 -->
<template>
  <NewComponentList :list="list" />
</template>

7. 保留对象模式

要想简化组件代码，可以把整个对象传递给组件，不要把对象的内容分别传递给组件的每个 props。然而，这种模式可能会提高组件对对象结构的依赖程度，因此，这种设计模式并不适用于通用组件。

<!-- 把整个对象传递给组件 -->
<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. 控制器组件模式

控制器组件桥接了 UI（谦卑组件）与业务逻辑（组合式函数），可以集中管理状态与交互操作，协调应用的整体行为。鉴于，控制器组件集中管理状态的特性，在单元测试与集成测试时可以不用关心 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. 策略模式

策略模式能根据运行时的条件动态切换组件，使代码更易读、更灵活。根据用户权限动态切换菜单组件的显示，就是策略模式的典型应用场景。

<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 的设计模式。这 12 种模式都是 Vue 前端开发时常用的，当然，如果你使用 React 或 Vanilla JS，也可以参考。

我会继续努力，在成为全栈开发者的道路上继续奔驰，并为大家带来更多优质内容。如果你觉得这篇文章有用，记得点赞、在看和分享哦！

上一篇 下一篇

猜你喜欢

热点阅读