Question

Nuxt 使用 Vue 并添加了组件自动导入和基于文件的路由等功能。

Nuxt 使用 Vue 作为前端框架，并添加了组件自动导入和基于文件的路由等功能。 Nuxt 3 集成了 Vue 3，Vue 的新主要版本为 Nuxt 用户启用了新模式。

虽然使用 Nuxt 不需要深入了解 Vue，但我们建议您阅读文档并浏览 vuejs.org 上的一些示例。

Nuxt 一直使用 Vue 作为前端框架。 出于以下原因，我们选择在 Vue 之上构建 Nuxt：

• Vue 的反应模型，其中数据的变化会自动触发界面的变化。
• 基于组件的模板，同时保持 HTML 作为网络的通用语言，支持直观的模式，使您的界面保持一致，但功能强大。
• 从小型项目到大型 Web 应用程序，Vue 在规模上保持良好表现，以确保您的应用程序不断为用户提供价值。

Vue with Nuxt

单文件组件

Nuxt 3 基于 Vue 3。新的主要 Vue 版本引入了 Nuxt 利用的几个变化：

• 更好的性能
• 组合 API
• Typescript支持

更快的渲染

Vue 虚拟 DOM (VDOM) 已经从头开始重写，可以提供更好的渲染性能。 最重要的是，在处理已编译的单文件组件时，Vue 编译器可以在构建时通过分离静态和动态标记进一步优化它们。

这导致更快的首次渲染（组件创建）和更新，以及更少的内存使用。 在 Nuxt 3 中，它还支持更快的服务器端渲染。

更小的包

在 Vue 3 和 Nuxt 3 中，重点放在了减少包大小上。 在版本 3 中，Vue 的大部分功能，包括模板指令和内置组件，都是可摇树优化的。 如果您不使用它们，您的生产包将不会包含它们。

这样，最小的 Vue 3 应用程序可以压缩到 12 kb gzip。

Composition API

向 Vue 2 中的组件提供数据和逻辑的唯一方法是通过 Options API，它允许您将数据和方法返回到具有预定义属性（如“data”和“methods”）的模板：

vue

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

Vue 3 中引入的 Composition API 并不是 Options API 的替代品，但它可以在整个应用程序中实现更好的逻辑重用，并且 是按复杂组件中的关注点对代码进行分组的一种更自然的方式。

与 <script> 定义中的 setup 关键字一起使用，这里是用 Composition API 和 Nuxt 3 自动导入的 Reactivity API 重写的上述组件：

vue

<script setup>
  const count = ref(0);
  const increment = () => count.value++;
</script>

Nuxt 3 的目标是围绕 Composition API 提供出色的开发人员体验。

• 使用从 Vue 和 Nuxt 3 内置可组合项。
• 在 composables/ 目录中编写您自己的自动导入的可重用函数。

TypeScript支持

Vue 3 和 Nuxt 3 都是用 TypeScript 编写的。 完全类型化的代码库可以防止错误并记录 API 的使用。 这并不意味着您必须使用 TypeScript 编写应用程序才能利用它。 使用 Nuxt 3，您可以通过将文件从 .js 重命名为 .ts 来选择加入，或者在组件中添加 <script lang="ts">。