当前位置：首页 > news >正文

vue-27（实践练习：将现有组件重构为使用组合式 API）

news 来源：原创 2025/6/28 11:08:22

实践练习：将现有组件重构为使用组合式 API

理解重构过程

重构是任何开发者的关键技能，尤其是在采用新范式如 Vue.js 中的 Composition API 时。它涉及在不改变外部行为的情况下重新组织现有代码，旨在提高可读性、可维护性和可重用性。在从 Options API 迁移到 Composition API 的背景下，重构使我们能够利用后者的优势，如更好的代码组织和逻辑重用，而无需从头开始重写整个组件。本课程将引导你通过一个实际的重构练习，演示如何系统地将一个 Options API 组件转换为它的 Composition API 等价物。

关键概念和原则

1. 识别重构机会

在深入代码之前，需要识别你的 Options API 组件中哪些部分最能从 Composition API 中受益。寻找以下部分：

包含复杂的逻辑，难以理解。
在多个组件中重复。
涉及分散在组件中的反应性数据。

例如，考虑一个组件，它获取数据，根据用户输入进行过滤，并显示结果。这种逻辑可以使用组合式 API 在一个可组合函数中整齐地封装起来。

2. `setup` 函数

setup 函数是 Vue 组件中 Composition API 的入口点。它用于声明响应式数据、定义方法，并返回在模板中可用的值。

基本示例：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment,};},
};
</script>

在这个例子中，ref 被用来创建一个响应式变量 count。increment 函数修改这个值。count 和 increment 都从 setup 返回，使它们在模板中可以被访问。

高级示例：

<template><div><p>Message: {{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script>
import { ref, onMounted } from 'vue';export default {props: {initialMessage: