choukin

V1

2022/07/30阅读:11主题:默认主题

[Nuxt 3] (十三) Nuxt 是如何工作的?

如无必要,勿增实体 ——奥卡姆剃刀定律

Nuxt 是如何工作的?

Nuxt是一个很小且高度可定制化的框架,用来开发web应用程序,本指南,帮助你更好的理解Nuxt的内部结构,以便在Nxut基础上开发新的解决方案,和模块集成。

Nuxt 的接口

当在开发模式使用nuxi dev启动nuxt 或者使用nuxi build 构建生产应用时,会创建一个公用的上下文,被称为nuxt 内部上下文。它包含nuxt.config文件合并的规范化配置项,一些内部组状态,以及有unjs/hookable 提供支持的强大的钩子系统,循序不同组件之间互相通信,你可以把它当作Builder Core.

这个上下文和nuxt/kit组合使用,因此每个进程只允许运行一个Nuxt实例。

要扩展Nuxt 接口并且挂钩到不同的构建进程,我们可以使用[Nuxt 模块]((/guide/going-further/modules)。

了解更多细节,请查看源码.

NuxtApp 接口

当在浏览器端或服务器端渲染页面时,一个共享的上下文会被创建,这个上下文叫做 nuxtApp

这个上下文保持了Vue实例,运行时钩子,和内部状态,如ssrContext 和混合时的有效负载。 你可以将其视为 Runtime Core.

这个上下文可以在nuxt 插件,<script setup> 和vue 组合API中使用 usenuxtApp() 来访问这个上下文。

在浏览器端可以全局使用,但为了避免用户共享上下文不能在服务器端使用。

我们可以使用Nuxt 插件 在不同阶段来访问这个上下文,或扩展 nuxtApp 接口和挂钩到不同的阶段。

查看Nuxt App 来了解这个接口的更多信息

nuxtApp 具有下列属性:

注意:这是个内部接口,在稳定发布前,一些属性可能会发生变化。

const nuxtApp = {
  vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api

  // These let you call and add runtime NuxtApp hooks
  // https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // Only accessible on server-side
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // This will be stringified and passed from server to client
  payload: {
    serverRenderedtrue,
    data: {},
    state: {}
  }

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

查看 the source code了解更多.

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

Nuxt 使用Node.js 构建和打包项目,另外还有还有一个运行时。

虽然两部分都可以扩展,但运行时上下文和构建时隔离的。因此,除了运行时配置外,它们不应该共享状态,代码或上下文。

nuxt.configNuxt模块用来扩展构建时上下文,Nuxt 插件 可以用来扩展运行时上下文。

当构建上产应用时,nuxi build会生成一个独立于nuxt.configNuxt modules. 的文件夹.output

分类:

前端

标签:

Vue.js

作者介绍

choukin
V1