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

实践练习：将现有组件重构为使用组合式 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: