需要改为组合式api

在Vue3中，官方推荐使用“组合式API”（Compositional API），这是一种全新的、简洁的API设计，旨在提高开发效率和代码可读性。之前的选项式API（Options API）仍然可用，但它已经被认为过时，而组合式API成为了主流。

组合式API的核心概念包括`setup()`、`ref`、`reactive`、`computed`等。以下是一个简单的示例，展示了如何将一个变量转换为响应式并在`setup()`中使用：

import { createApp, onMounted } from 'vue';
import App from './App.vue'; // 组件

createApp(App).mount('#app'); // 创建并挂载应用

// 组合式组件中的setup()函数
export default function MyComponent() {
  // 使用ref创建响应式的值
  const count = ref(0);

  // 在setup中处理初始化或订阅更新
  onMounted(() => {
    // 每隔一秒增加count
    const intervalId = setInterval(() => {
      count.value++;
    }, 1000);
    
    // 清除定时器的逻辑也放在setup里，当组件卸载时会被自动调用
    onBeforeUnmount(() => clearInterval(intervalId));
  });

  return {
    // 返回组件需要渲染的内容
    template: `<div>Count: {{ count }}</div>`,
  };
}

通过这种方式，组件之间的依赖更容易管理，而且减少了全局状态的使用，提高了代码的模块性和可测试性。