如何用重构解锁高效 Vue 开发之路

news2025/2/27 14:26:27

在这里插入图片描述

文章目录

- 摘要
- 引言
- 什么是代码重构
- 为什么要减少重复逻辑
- Vue 示例代码
- - 问题场景
  - 初始代码的痛点
  - 重构后的通用组件 TaskList.vue
  - - 详细说明
  - 重用通用组件
  - - 详细说明
  - 模拟数据与运行结果
- QA环节
- 总结
- 参考资料

摘要

代码重构是改善代码质量的重要手段，特别是在减少重复逻辑方面。通过遵循重构原则和方法，可以提高代码的可维护性、可读性和可扩展性。本篇文章将探讨如何通过代码重构减少重复逻辑，介绍具体的实现方式，并提供 Vue 示例代码。

引言

在软件开发中，开发者经常会因项目进度紧张或缺乏经验，直接复制粘贴已有代码以实现功能。尽管这种方式可以快速交付，但却会在项目中留下大量重复逻辑，增加了代码维护的复杂性。代码重构可以帮助我们清除这些重复逻辑，使代码更加简洁、规范。

什么是代码重构

代码重构是指在不改变代码外部行为的情况下，对代码内部结构进行调整，以提升其质量。这种调整通常包括简化代码逻辑、删除重复代码、改善代码可读性等。

为什么要减少重复逻辑

提升代码可维护性：重复逻辑会导致相同的问题需要多处修复。
减少错误概率：减少重复逻辑意味着减少手动更新代码的机会，从而降低引入新错误的可能性。
提高代码复用性：通过提取公共逻辑，可以构建更模块化的代码结构。

Vue 示例代码

问题场景

假设我们开发一个任务列表应用，其中有两个页面：待办任务 和 已完成任务。这两个页面的渲染逻辑相似，导致代码重复。

初始代码的痛点

在初始代码中，我们有两个页面组件：TodoList.vue 和 CompletedList.vue。两个组件的代码大致相同，区别仅在于显示的标题和绑定的任务数据：

代码重复：两个组件中存在高度重复的 HTML 和 JavaScript 逻辑。
难以维护：如果需要更新任务列表的展示逻辑，则需要在两个组件中分别修改，容易引入错误。
低复用性：无法快速适配其他类似页面（如“延迟任务”或“取消任务”）。

这使得代码冗长，维护成本高。

重构后的通用组件 TaskList.vue

我们通过代码重构，提取出了一个通用组件 TaskList.vue，其职责仅为根据输入的 props 渲染任务列表。

<!-- TaskList.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: String, // 接收标题
    tasks: Array,  // 接收任务列表数据
  },
};
</script>

详细说明

参数化设计：
通过 props 属性定义了组件的两个输入参数：
- title：设置标题。
- tasks：任务列表数据，类型为数组。
灵活复用：
TaskList 组件仅负责渲染传入的标题和任务数据，与具体的业务逻辑无关。因此，该组件可以复用到其他任务场景中，如“延迟任务列表”或“高优先级任务列表”。
可维护性提升：
未来，如果需要调整任务列表的展示样式或功能，只需更新 TaskList.vue 组件即可，无需在多个地方进行重复修改。

重用通用组件

我们用 TaskList 组件重写了 TodoList 和 CompletedList 页面：

TodoList.vue

<template>
  <TaskList title="待办任务" :tasks="tasks" />
</template>

<script>
import TaskList from './TaskList.vue';

export default {
  components: { TaskList },
  props: {
    tasks: Array, // 待办任务数据
  },
};
</script>

CompletedList.vue

<template>
  <TaskList title="已完成任务" :tasks="tasks" />
</template>

<script>
import TaskList from './TaskList.vue';

export default {
  components: { TaskList },
  props: {
    tasks: Array, // 已完成任务数据
  },
};
</script>

详细说明

组件嵌套：TodoList 和 CompletedList 页面中嵌套了 TaskList 通用组件，只需传入对应的 props 即可完成数据绑定与渲染。
职责分离：
- TaskList：负责任务列表的渲染逻辑。
- TodoList 和 CompletedList：负责提供特定任务数据，充当业务逻辑与 UI 渲染的桥梁。
代码精简：页面组件的代码量大幅减少，变得更清晰易懂。

模拟数据与运行结果

模拟数据
在实际使用中，可以通过父组件传入任务数据：

const todoTasks = [
  { id: 1, name: "完成 Vue 教程" },
  { id: 2, name: "修复 Bug #1234" },
];

const completedTasks = [
  { id: 3, name: "提交 PR 到主分支" },
  { id: 4, name: "开会讨论需求" },
];