vue2的选项式api怎么变成组合式api

Vue 2.x 的组件通常采用的是“选项式 API”编写，而 Vue 3 引入了更简洁、模块化的“组合式 API”。如果你想将 Vue 2 的选项式 API 转换成组合式 API，可以按照以下步骤操作：

1. **导入并使用**：
- 首先，引入 `setup` 函数，这是组合式 API 中创建组件的主要入口点。

   import { createApp } from 'vue';

2. **拆分组件数据和方法**：
- 将以前放在 `data` 或 `methods` 中的对象移动到单独的函数中，返回一个新的对象。

   // 选项式API
   export default {
     data() {
       return {
         message: 'Hello, Vue!'
       };
     },
     methods: {
       showMessage() {
         console.log(this.message);
       }
     }
   };

   // 组合式API
   function useComponent() {
     const data = () => ({ message: 'Hello, Vue!' });
     const methods = {
       showMessage() {
         console.log(this.message);
       }
     };
     return { data, methods };
   }

3. **在 setup 函数中使用**：
- 使用 `createApp` 构造一个应用实例，并传入 `useComponent` 返回的对象，以及任何其他需要传递给根组件的选项。

   const app = createApp({
     setup() {
       const { data, methods } = useComponent();
       // 使用数据和方法
       data.message; // 访问数据
       methods.showMessage(); // 调用方法
       return { data }; // 返回想要暴露的数据
     }
   });

   app.mount('#app');

4. **避免 `this` 指向问题**：
- 组件内部通常不再直接使用 `this`，而是通过参数或局部变量获取。