vue3 减少import

Vue3引入了 Composition API，它改变了传统的组件结构，使得文件导入（import）管理变得更加简洁高效。Composition API允许你将状态和计算函数抽取到单独的模块（如`setup()`函数），而不是直接在组件内部声明。这有以下几个优点：

1. **解耦**：分离了状态和逻辑，减少了组件间的相互依赖，每个文件更专注于自身的职责。

2. **按需导入**：通过`import { ref } from 'vue'`这样的形式，你可以只导入你需要的部分功能，而不是整个框架。

3. **动态导入**：可以使用`async`和`await`来延迟加载相关的模块，提升首次加载速度。

4. **懒加载**：对于大项目，特别是当组件树很深时，通过按需加载，可以避免一次性加载过多的模块。

使用Composition API，你的代码可能会看起来像这样：

// 引入按需部分
import { ref, onMounted } from 'vue'

// 在组件内
export default {
  setup() {
    const count = ref(0) // 使用ref存储状态

    onMounted(() => {
      // 初始化或其他初始化操作
    })

    return {
      count,
      increment: () => (count.value++),
      decrement: () => (count.value--)
    }
  }
}