Vue 3.3发布了，带来了很多新特性。

本文是代码重构实战，从烂代码到优雅代码，包括重构原则、常见坏味道、重构技巧、新特性应用，以及我的经验总结。

一、为什么要重构

1. 代码腐烂

第一个原因：代码腐烂。

  • 需求变更
  • 快速迭代
  • 技术债累积
  • 代码越来越烂
  • 维护成本高

代码腐烂，是常态。

2. 新特性

第二个原因：新特性。

  • Vue 3.3有新特性
  • 可以让代码更优雅
  • 可以用新特性重构
  • 提高代码质量
  • 提高开发效率

新特性，是契机。

3. 团队协作

第三个原因：团队协作。

  • 代码可读性差
  • 新人难上手
  • 协作成本高
  • 重构后更好维护
  • 团队受益

团队协作，是动力。

4. 性能优化

第四个原因：性能优化。

  • 烂代码性能差
  • 重构后性能更好
  • 用户体验更好
  • 是重构的理由
  • 但不是唯一理由

性能，是结果之一。

二、常见的代码坏味道

1. 组件过大

第一个坏味道：组件过大。

  • 一个组件几百行
  • 甚至上千行
  • 职责不清
  • 难以维护
  • 需要拆分

大组件，是最常见的坏味道。

2. 逻辑重复

第二个坏味道：逻辑重复。

  • 同样的逻辑写多遍
  • 复制粘贴
  • 修改要改多处
  • 容易遗漏
  • 需要提取

重复代码，是万恶之源。

3. 命名混乱

第三个坏味道：命名混乱。

  • 变量名不清晰
  • 函数名不规范
  • 看不懂
  • 需要猜
  • 影响可读性

命名，是基本功。

4. 嵌套过深

第四个坏味道：嵌套过深。

  • if套if
  • for套for
  • 回调套回调
  • 看不懂
  • 需要扁平化

嵌套，是可读性杀手。

5. 魔法数字

第五个坏味道：魔法数字。

  • 代码里出现数字
  • 不知道什么意思
  • 需要注释
  • 应该定义常量
  • 是坏味道

魔法数字，要消除。

三、Vue 3.3新特性

1. 宏的导入

第一个新特性：宏的导入。

<script setup>
import { defineProps, defineEmits } from 'vue'
</script>
  • 可以显式导入宏
  • 更清晰
  • IDE支持更好
  • 是小改进

宏导入，是规范的改进。

2. defineProps的解构

第二个新特性：defineProps的解构。

<script setup>
const { name, age = 18 } = defineProps({
    name: String,
    age: Number
})
</script>
  • 可以解构props
  • 可以有默认值
  • 更方便
  • 不需要toRefs

props解构，是实用特性。

3. defineEmits的类型

第三个新特性：defineEmits的类型。

<script setup>
const emit = defineEmits<{
    (e: 'change', value: string): void
}>()
</script>
  • 更精确的类型
  • 更好的提示
  • 更安全

emits类型，是类型安全的改进。

4. 泛型组件

第四个新特性：泛型组件。

<script setup generic="T">
const props = defineProps<{
    items: T[]
}>()
</script>
  • 支持泛型
  • 更灵活
  • 更强大
  • 适合通用组件

泛型组件，是高级特性。

5. 更稳定的Suspense

第五个新特性：更稳定的Suspense。

  • Suspense更稳定
  • 异步组件更好用
  • 加载状态管理
  • 体验更好

Suspense，是异步的好帮手。

四、重构技巧

1. 技巧一：拆分组件

第一个技巧：拆分组件。

  • 按职责拆分
  • 按功能拆分
  • 按页面区域拆分
  • 每个组件职责单一
  • 组件不要太大

拆分，是最基本的重构。

2. 技巧二：提取组合式函数

第二个技巧：提取组合式函数。

  • 把逻辑提取到composable
  • 复用逻辑
  • 组件更简洁
  • 逻辑更清晰
  • 是Vue 3的核心

composable，是Vue 3的精髓。

3. 技巧三：用computed

第三个技巧：用computed。

  • 复杂的计算用computed
  • 模板更简洁
  • 有缓存
  • 性能更好
  • 不要在模板里写复杂逻辑

computed，是模板的好帮手。

4. 技巧四：用v-model

第四个技巧：用v-model。

  • 自定义组件支持v-model
  • 更简洁
  • 更符合Vue习惯
  • 减少props和emit的样板代码
  • 是好实践

v-model，是Vue的特色。

5. 技巧五：用插槽

第五个技巧：用插槽。

  • 内容分发用插槽
  • 组件更灵活
  • 复用性更好
  • 不要用props传复杂内容
  • 插槽是正确方式

插槽，是组件的灵活所在。

五、重构实战

1. 实战一：大组件拆分

第一个实战：大组件拆分。

重构前：

<!-- 一个组件包含表单、列表、详情 -->
<template>
    <div>
        <form>...</form>
        <list>...</list>
        <detail>...</detail>
    </div>
</template>

重构后：

<template>
    <div>
        <UserForm />
        <UserList />
        <UserDetail />
    </div>
</template>
  • 拆成三个组件
  • 每个职责单一
  • 更好维护
  • 更好复用

拆分，效果立竿见影。

2. 实战二：逻辑提取

第二个实战：逻辑提取。

重构前：

<script setup>
// 分页逻辑写在组件里
const page = ref(1)
const pageSize = ref(10)
const loadData = () => { ... }
</script>

重构后：

// composables/usePagination.js
export function usePagination() {
    const page = ref(1)
    const pageSize = ref(10)
    const loadData = () => { ... }
    return { page, pageSize, loadData }
}
  • 提取到composable
  • 可以复用
  • 组件更简洁
  • 逻辑更清晰

提取，是复用的关键。

3. 实战三：模板优化

第三个实战：模板优化。

重构前：

<template>
    <div>{{ user.name ? user.name : '未知' }}</div>
</template>

重构后：

<script setup>
const displayName = computed(() => user.name || '未知')
</script>
<template>
    <div>{{ displayName }}</div>
</template>
  • 复杂逻辑移到computed
  • 模板更简洁
  • 有缓存
  • 性能更好

模板优化，是细节。

4. 实战四：类型优化

第四个实战：类型优化。

重构前：

const props = defineProps({
    name: String,
    age: Number
})

重构后：

interface UserProps {
    name: string
    age?: number
}
const props = defineProps<UserProps>()
  • 用类型定义
  • 更清晰
  • 更好的提示
  • 更安全

类型优化，是质量的保障。

5. 实战五：状态管理优化

第五个实战：状态管理优化。

重构前：

  • 组件里管状态
  • 组件间传参复杂
  • 状态混乱

重构后：

  • 用Pinia
  • 集中管理
  • 组件更简洁
  • 状态更清晰

状态管理，是架构的关键。

六、重构原则

1. 原则一：小步快跑

第一个原则：小步快跑。

  • 不要一下子大改
  • 每次改一点
  • 每次都能运行
  • 每次都有测试
  • 降低风险

小步，是安全的方式。

2. 原则二：保持功能不变

第二个原则：保持功能不变。

  • 重构不改变功能
  • 只改代码结构
  • 不要边重构边加功能
  • 不然容易出问题
  • 是重构的基本原则

功能不变，是重构的底线。

3. 原则三：有测试保障

第三个原则：有测试保障。

  • 重构前写测试
  • 重构后跑测试
  • 确保功能不变
  • 没有测试要小心
  • 测试是安全网

测试，是重构的保障。

4. 原则四：持续重构

第四个原则：持续重构。

  • 不是一次重构完
  • 是持续的
  • 每次改代码都重构一点
  • 代码会越来越好
  • 是习惯

持续，是重构的常态。

5. 原则五：团队共识

第五个原则：团队共识。

  • 重构需要团队同意
  • 统一规范
  • 统一风格
  • 一起维护
  • 不然会反复

共识，是重构的基础。

七、重构后的好处

1. 好处一：可读性提高

第一个好处：可读性提高。

  • 代码更清晰
  • 更容易理解
  • 新人上手快
  • 维护成本低
  • 是最直接的好处

可读性，是重构的核心目标。

2. 好处二：可维护性提高

第二个好处：可维护性提高。

  • 修改更容易
  • Bug更少
  • 定位问题更快
  • 维护成本低
  • 是长期收益

可维护性，是重构的长期价值。

3. 好处三：可复用性提高

第三个好处：可复用性提高。

  • 组件可以复用
  • 逻辑可以复用
  • 开发效率高
  • 代码量减少
  • 是重构的额外收益

可复用性，是效率的保障。

4. 好处四：性能提升

第四个好处：性能提升。

  • 代码更高效
  • 渲染更快
  • 用户体验好
  • 是重构的附带收益
  • 但不是主要目标

性能，是锦上添花。

5. 好处五：团队士气

第五个好处：团队士气。

  • 好代码让人心情好
  • 愿意维护
  • 有成就感
  • 团队更积极
  • 是无形的收益

士气，是无形的价值。

八、写在最后

Vue 3.3+代码重构，从烂代码到优雅代码。

为什么重构：代码腐烂、新特性、团队协作、性能优化。常见坏味道：组件过大、逻辑重复、命名混乱、嵌套过深、魔法数字。Vue 3.3新特性：宏导入、props解构、emits类型、泛型组件、Suspense。重构技巧：拆分组件、提取composable、用computed、用v-model、用插槽。重构原则：小步快跑、功能不变、有测试、持续重构、团队共识。

2023年了，Vue 3.3带来了很多新特性，是重构的好时机。重构不是一次性的，是持续的。每次改代码都重构一点，代码会越来越好。好的代码，让人心情愉悦，让团队高效，让产品稳定。

最后，用一句话总结："代码重构，不是为了炫技，是为了可维护。从烂代码到优雅代码，需要耐心，需要方法，需要持续。但一切都是值得的。"

希望我的重构经验，能帮你写出更优雅的Vue代码。