能否不使用<script setup>运行Nuxt3？Nuxt2迁移代码保留疑问

是否可以不使用 <script setup> 运行 Nuxt 3？ #

完全可以。Nuxt 3 兼容传统的纯 <script> 标签写法，你可以选择两种方式编写组件：

1. 选项式API（Options API）：和 Vue 2、Nuxt 2 的写法一致，通过 export default 导出组件选项

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

2. 组合式API（Composition API）：在纯 <script> 中通过 setup 函数编写逻辑，手动返回需要暴露给模板的变量和方法

<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
}
</script>

Nuxt 2 迁移至 Nuxt 3 时，能否保留纯 <script> 代码？ #

可以保留，但需要针对 Nuxt 3 的 API 变更做少量调整：

• 废弃 API 替换：Nuxt 2 中的 asyncData 需替换为 Nuxt 3 的 useAsyncData 组合式函数；原 fetch 钩子可改为 useFetch，或调整为 Nuxt 3 选项式 API 中支持的新 fetch 写法（需返回一个函数）
• 上下文对象获取：Nuxt 2 中通过 this.$route、this.$store 访问的上下文对象，在 Nuxt 3 选项式 API 中仍可通过 this 访问，但更推荐使用 useRoute()、useNuxtApp() 等组合式函数
• 模块/插件兼容：如果代码依赖 Nuxt 2 专属模块或插件，需确认其是否兼容 Nuxt 3，或寻找替代方案

<script setup> 与纯 <script> 的主要区别 #

• 语法简洁度：<script setup> 是编译时语法，无需写 export default 和 setup 函数，变量、函数、导入的组件可直接暴露给模板，无需手动 return；纯 <script> 需通过导出选项或 setup 返回值传递内容给模板
• Tree Shaking 效率：<script setup> 会自动做精准的 Tree Shaking，只打包模板用到的代码；纯 <script> 的选项式 API 或手动编写的 setup 函数，Tree Shaking 效率相对较低
• 组件注册：<script setup> 中导入的组件可直接使用，无需手动注册；纯 <script> 需在 components 选项中注册组件
• 上下文访问：<script setup> 中不能使用 this，需通过 useRoute()、useNuxtApp() 等组合式函数获取上下文；纯 <script> 的选项式 API 可通过 this 访问组件实例和上下文对象
• 顶层 await 支持：<script setup> 支持直接写顶层 await；纯 <script> 中需将 await 放在异步函数内部（如 setup 函数中）

内容的提问来源于stack exchange，提问作者Falcon Stakepool