vue3项目中的.vue文件如何引入多个<script>标签

在 Vue 3 项目中，`.vue` 文件是单文件组件 (Single File Component)，每个 `.vue` 文件实际上是一个包含 HTML、CSS 和 JavaScript 的模板。若要在单个 `.vue` 文件中引入多个 `<script>` 标签，可以按照以下方式进行：

1. **分隔内容**：
通常，我们会把相关的业务逻辑放在单独的 `.js` 文件中，然后在`.vue`文件里引用它们。在`.vue`文件的 `<script setup>` 部分，可以用 `import` 从相应的 `.js` 文件引入：

   <template>
     <!-- ... -->
   </template>

   <script setup lang="ts">
     import { ref } from 'vue'
     import MyLogic from './my_logic.js'

     // 使用导入的内容
     const myVar = ref(MyLogic.myVariable)
   </script>

如果是 ES6 语法，`import` 后面直接跟模块名即可。

2. **异步加载**：
对于一些非必需的脚本，可以使用 `v-if` 或 `v-show` 策略进行条件加载，或者使用 `async` 和 `await` 动态导入：

   <script setup>
     import { onMounted } from 'vue'
     
     onMounted(async () => {
       const myData = await import('./my_data.js')
       // 使用数据
     })
   </script>

这样可以避免一开始就加载所有脚本导致性能影响。

记住，保持良好的模块化和组织结构对大型项目至关重要。将相关的逻辑拆分成独立的模块，有助于维护和复用。