Nuxt 工作原理

本指南帮助您更好地理解 Nuxt 的核心，以便在 Nuxt 之上开发新的解决方案和模块集成。

Nuxt 接口

当您使用 nuxi dev 开始以开发模式启动 Nuxt，或者使用 nuxi build 构建生产应用程序时， 会创建一个通用的上下文环境，在内部被称为 nuxt。它包含归一化选项与 nuxt.config 文件合并后的结果、 某些内部状态，以及由 unjs/hookable 提供支持的强大 hooking 系统， 从而允许不同组件之间进行通信。您可以将其视为构建核心。

这个上下文在全局范围内可用，并通过 Nuxt Kit 组合件使用。 因此，每个进程只允许运行一个Nuxt实例。

为了扩展Nuxt接口并钩入构建过程的不同阶段，我们可以使用 Nuxt Modules。

更多详情，请查看源代码。

NuxtApp 接口

当在浏览器或服务器上渲染页面时，将创建一个共享的上下文，称为 nuxtApp。 这个上下文保持了 Vue 实例、运行时钩子和内部状态，比如 ssrContext 和 hydration 的 payload。 你可以把它想象成运行时核心。

这个上下文可以通过 useNuxtApp() 组合件在 Nuxt 插件和 <script setup> 以及 Vue 组合函数中访问。 在浏览器中可以使用全局，但在服务器上不可用，以避免在用户之间共享上下文。

由于useNuxtApp如果在当前不可用的情况下抛出异常，如果你的组合件不总是需要nuxtApp，你可以使用tryUseNuxtApp替代，它将返回null而不是抛出异常。

为了扩展 nuxtApp 接口并钩入不同的阶段或访问上下文，我们可以使用 Nuxt Plugins。

查看 Nuxt App 以获取更多关于此接口的信息。

nuxtApp 具有以下属性：

const nuxtApp = {
  vueApp, // 全局 Vue 应用程序：https://vuejs.org/api/application.html#application-api

  versions, // 包含 Nuxt 和 Vue 版本的对象

  // 这些让你调用和添加运行时 NuxtApp 钩子
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // 仅在服务器端可访问
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // 这将被序列化并从服务器传递到客户端
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

更多详情，请查看源代码。

运行时上下文与构建上下文

Nuxt 使用 Node.js 构建和打包项目，但它也有一个运行时方面。

虽然两个领域都可以被扩展，但运行时上下文与构建时隔离。因此，它们不应该共享状态、代码或上下文，除了运行时配置！

nuxt.config 和 Nuxt Modules 可以用来扩展构建上下文，而 Nuxt Plugins 可以用来扩展运行时。

当为生产构建应用程序时，nuxi build 将在 .output 目录中生成一个独立的构建，独立于 nuxt.config 和 Nuxt modules。