[{"data":1,"prerenderedAt":2658},["ShallowReactive",2],{"docs-all-flat":3,"docs-\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fperformance":1018},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,691,695,699,703,707,711,715,719,723,727,731,735,739,743,747,751,755,759,763,767,770,774,778,782,786,790,794,798,802,806,809,813,817,821,825,829,833,837,841,845,849,852,855,859,863,867,871,874,877,881,884,888,892,895,898,901,904,907,911,915,918,922,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1006,1010,1014],{"path":5,"title":6,"description":7},"\u002Fdocs\u002Fgetting-started\u002Fintroduction","介绍","Nuxt 的目标是提供直观且高性能的 Web 开发体验，并始终将优秀的开发者体验（Developer Experience）放在心上。",{"path":9,"title":10,"description":11},"\u002Fdocs\u002Fgetting-started\u002Finstallation","安装","通过在线 starter 快速上手 Nuxt，或在本地使用终端从零开始。",{"path":13,"title":14,"description":15},"\u002Fdocs\u002Fgetting-started\u002Fconfiguration","配置","Nuxt 提供了合理的默认配置，让你高效开发。",{"path":17,"title":18,"description":19},"\u002Fdocs\u002Fgetting-started\u002Fviews","视图","Nuxt 提供了多个组件层来实现应用的用户界面。",{"path":21,"title":22,"description":23},"\u002Fdocs\u002Fgetting-started\u002Fassets","资源","Nuxt 为你的资源提供了两种处理方式。",{"path":25,"title":26,"description":27},"\u002Fdocs\u002Fgetting-started\u002Fstyling","样式","了解如何为你的 Nuxt 应用添加样式。",{"path":29,"title":30,"description":31},"\u002Fdocs\u002Fgetting-started\u002Frouting","路由","Nuxt 的文件系统路由会为 pages\u002F 目录中的每个文件创建一条路由。",{"path":33,"title":34,"description":35},"\u002Fdocs\u002Fgetting-started\u002Fseo-meta","SEO 与 Meta","借助强大的 head 配置、composables 和组件，改善你的 Nuxt 应用的 SEO。",{"path":37,"title":38,"description":39},"\u002Fdocs\u002Fgetting-started\u002Ftransitions","过渡","使用 Vue 或浏览器原生的 View Transitions，在页面和布局之间应用过渡效果。",{"path":41,"title":42,"description":43},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching","数据获取","Nuxt 提供了用于处理应用内数据获取的 composables。",{"path":45,"title":46,"description":47},"\u002Fdocs\u002Fgetting-started\u002Fstate-management","状态管理","Nuxt 提供了强大的状态管理库和 useState composable，用于创建响应式且对 SSR 友好的共享状态。",{"path":49,"title":50,"description":51},"\u002Fdocs\u002Fgetting-started\u002Ferror-handling","错误处理","了解如何在 Nuxt 中捕获和处理错误。",{"path":53,"title":54,"description":55},"\u002Fdocs\u002Fgetting-started\u002Fserver","Server","利用 Nuxt 的服务端框架构建全栈应用。你可以从数据库或其他服务端获取数据、创建 API，甚至生成像站点地图或 RSS 这样的静态服务端内容——全部来自同一个代码库。",{"path":57,"title":58,"description":59},"\u002Fdocs\u002Fgetting-started\u002Flayers","Layers","Nuxt 提供了一套强大的系统，允许你扩展默认文件、配置以及更多内容。",{"path":61,"title":62,"description":63},"\u002Fdocs\u002Fgetting-started\u002Fprerendering","Prerendering","Nuxt 允许在构建时静态渲染某些页面，以改善特定的性能或 SEO 指标。",{"path":65,"title":66,"description":67},"\u002Fdocs\u002Fgetting-started\u002Fdeployment","Deployment","了解如何将你的 Nuxt 应用部署到任何托管提供商。",{"path":69,"title":70,"description":71},"\u002Fdocs\u002Fgetting-started\u002Ftesting","Testing","如何测试你的 Nuxt 应用。",{"path":73,"title":74,"description":75},"\u002Fdocs\u002Fgetting-started\u002Fupgrade","Upgrade Guide","了解如何升级到最新的 Nuxt 版本。",{"path":77,"title":78,"description":79},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt",".nuxt","Nuxt 在开发阶段使用 .nuxt\u002F 目录来生成你的 Vue 应用。",{"path":81,"title":82,"description":83},"\u002Fdocs\u002Fdirectory-structure\u002Foutput",".output","Nuxt 在为生产环境构建应用时创建 .output\u002F 目录。",{"path":85,"title":86,"description":87},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fassets","assets","assets\u002F 目录用于添加所有将由构建工具处理的网站资源。",{"path":89,"title":90,"description":91},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents","components","components\u002F 目录用于存放你所有的 Vue 组件。",{"path":93,"title":94,"description":95},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomposables","composables","使用 composables\u002F 目录将你的 Vue 组合式函数自动导入到应用中。",{"path":97,"title":98,"description":99},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Flayouts","layouts","Nuxt 提供了一个布局框架，用于将通用的 UI 模式提取为可复用的布局。",{"path":101,"title":102,"description":103},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","middleware","Nuxt 提供中间件，用于在导航到特定路由前运行代码。",{"path":105,"title":106,"description":107},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fpages","pages","Nuxt 提供基于文件的路由，用于在 Web 应用中创建路由。",{"path":109,"title":110,"description":111},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fplugins","plugins","Nuxt 拥有一个插件系统，用于在创建 Vue 应用时使用 Vue 插件等。",{"path":113,"title":114,"description":115},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Futils","utils","使用 utils\u002F 目录在你的应用中自动导入工具函数。",{"path":117,"title":118,"description":119},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp","app.vue","app.vue 文件是你 Nuxt 应用的主组件。",{"path":121,"title":122,"description":123},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp-config","app.config.ts","使用 App Config 文件在应用内部暴露响应式配置。",{"path":125,"title":126,"description":127},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Ferror","error.vue","error.vue 文件是你 Nuxt 应用中的错误页面。",{"path":129,"title":130,"description":131},"\u002Fdocs\u002Fdirectory-structure\u002Fcontent","content","使用 content\u002F 目录为你的应用创建一个基于文件的 CMS。",{"path":133,"title":134,"description":135},"\u002Fdocs\u002Fdirectory-structure\u002Flayers","layers","使用 layers\u002F 目录在你的应用中组织和自动注册本地 layers。",{"path":137,"title":138,"description":139},"\u002Fdocs\u002Fdirectory-structure\u002Fmodules","modules","使用 modules\u002F 目录在你的应用中自动注册本地模块。",{"path":141,"title":142,"description":143},"\u002Fdocs\u002Fdirectory-structure\u002Fnode_modules","node_modules","包管理器将项目的依赖存储在 node_modules\u002F 目录中。",{"path":145,"title":146,"description":147},"\u002Fdocs\u002Fdirectory-structure\u002Fpublic","public","public\u002F 目录用于提供网站的静态资源。",{"path":149,"title":150,"description":151},"\u002Fdocs\u002Fdirectory-structure\u002Fserver","server","server\u002F 目录用于为你的应用注册 API 和服务端处理器。",{"path":153,"title":154,"description":155},"\u002Fdocs\u002Fdirectory-structure\u002Fshared","shared","使用 shared\u002F 目录在 Vue 应用和 Nitro 服务端之间共享功能。",{"path":157,"title":158,"description":159},"\u002Fdocs\u002Fdirectory-structure\u002Fenv",".env",".env 文件用于指定构建\u002F开发时的环境变量。",{"path":161,"title":162,"description":163},"\u002Fdocs\u002Fdirectory-structure\u002Fgitignore",".gitignore",".gitignore 文件用于指定 git 应当忽略的、有意不跟踪的文件。",{"path":165,"title":166,"description":167},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtignore",".nuxtignore",".nuxtignore 文件用于让 Nuxt 在构建阶段忽略项目根目录中的文件。",{"path":169,"title":170,"description":171},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtrc",".nuxtrc",".nuxtrc 文件允许你用扁平语法定义 Nuxt 配置。",{"path":173,"title":174,"description":175},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt-config","nuxt.config.ts","只需要一个 nuxt.config 文件，即可轻松配置 Nuxt。",{"path":177,"title":178,"description":179},"\u002Fdocs\u002Fdirectory-structure\u002Fpackage","package.json","package.json 文件包含你应用的所有依赖和脚本。",{"path":181,"title":182,"description":183},"\u002Fdocs\u002Fdirectory-structure\u002Ftsconfig","tsconfig.json","了解 Nuxt 如何在项目的不同部分管理 TypeScript 配置。",{"path":185,"title":186,"description":187},"\u002Fdocs\u002Fdirectory-structure","Nuxt 目录结构","了解 Nuxt 应用的目录结构以及如何使用它。",{"path":189,"title":190,"description":191},"\u002Fdocs\u002Fguide","Nuxt 指南","通过深入的指南了解 Nuxt 的工作原理。",{"path":193,"title":194,"description":195},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering","渲染模式","了解 Nuxt 中可用的不同渲染模式。",{"path":197,"title":198,"description":199},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fvuejs-development","Vue.js 开发","Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由以及支持 SSR 的组合式函数等特性。",{"path":201,"title":202,"description":203},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","Nuxt 生命周期","理解 Nuxt 应用的生命周期，可以帮助你更深入地了解框架是如何运作的，尤其是在服务端渲染和客户端渲染两方面。",{"path":205,"title":206,"description":207},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fauto-imports","自动导入","Nuxt 会自动导入组件、组合式函数、辅助函数和 Vue API。",{"path":209,"title":210,"description":211},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine","服务端引擎","Nuxt 由一个全新的服务端引擎驱动：Nitro。",{"path":213,"title":214,"description":215},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fmodules","模块","Nuxt 提供了一个模块系统来扩展框架核心并简化集成。",{"path":217,"title":218,"description":219},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fesm","ES 模块","Nuxt 使用原生的 ES 模块。",{"path":221,"title":222,"description":223},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript","TypeScript","Nuxt 完全类型化，并提供了有用的快捷方式，确保你在编码时能获取准确的类型信息。",{"path":225,"title":226,"description":227},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fcode-style","代码风格","Nuxt 开箱即用地支持 ESLint",{"path":229,"title":230,"description":231},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fdevcontainers","Dev Containers","在开发容器中设置或打开 Nuxt 项目，以获得一致开发环境。",{"path":233,"title":234,"description":235},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fhydration","Nuxt and Hydration","为什么修复水合问题很重要",{"path":237,"title":238,"description":239},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fperformance","Nuxt performance","提升 Nuxt 应用性能的最佳实践。",{"path":241,"title":242,"description":243},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fplugins","Nuxt Plugins","使用 Nuxt 插件时的最佳实践。",{"path":245,"title":246,"description":247},"\u002Fdocs\u002Fguide\u002Fai\u002Fmcp","Nuxt MCP Server","借助 Model Context Protocol 支持，在你的 AI 助手中使用 Nuxt 文档。",{"path":249,"title":250,"description":251},"\u002Fdocs\u002Fguide\u002Fai\u002Fllms-txt","Nuxt LLMs.txt","如何让 Cursor、Windsurf、GitHub Copilot、ChatGPT 和 Claude 等 AI 工具理解 Nuxt 的概念、API 和最佳实践。",{"path":253,"title":254,"description":255},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fgetting-started","创建你的第一个模块","学习如何使用官方启动模板创建你的第一个 Nuxt 模块。",{"path":257,"title":258,"description":259},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-anatomy","理解模块结构","学习 Nuxt 模块是如何构成的，以及如何定义它们。",{"path":261,"title":262,"description":263},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-basics","添加插件、组件等","学习如何从你的模块注入插件、组件、组合式函数和服务端路由。",{"path":265,"title":266,"description":267},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-dependencies","模块依赖","声明对其它模块的依赖，并带有版本约束和配置合并。",{"path":269,"title":270,"description":271},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-advanced","使用钩子与扩展类型","在你的模块中掌握生命周期钩子、虚拟文件和 TypeScript 声明。",{"path":273,"title":274,"description":275},"\u002Fdocs\u002Fguide\u002Fmodules\u002Ftesting","测试你的模块","学习如何对你的 Nuxt 模块进行单元、集成和 E2E 测试。",{"path":277,"title":278,"description":279},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fbest-practices","遵循最佳实践","使用这些指南构建高性能且可维护的 Nuxt 模块。",{"path":281,"title":282,"description":283},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fecosystem","发布与分享你的模块","加入 Nuxt 模块生态，并将你的模块发布到 npm。",{"path":285,"title":286,"description":287},"\u002Fdocs\u002Fguide\u002Fmodules","Module Author Guide","学习如何创建 Nuxt 模块，以集成、增强或扩展任意 Nuxt 应用。",{"path":289,"title":290,"description":291},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-routing","自定义路由","在 Nuxt 中，你的路由由 pages 目录内文件的结构定义。不过，由于底层使用了 vue-router，Nuxt 提供了几种在你的项目中添加自定义路由的方式。",{"path":293,"title":294,"description":295},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fvite-plugin","在 Nuxt 中使用 Vite 插件","学习如何将 Vite 插件集成到你的 Nuxt 项目中。",{"path":297,"title":298,"description":299},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-usefetch","Nuxt 中的自定义 useFetch","如何在 Nuxt 中创建用于调用你外部 API 的自定义 fetcher。",{"path":301,"title":302,"description":303},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","会话与鉴权","鉴权是 Web 应用中极其常见的需求。本配方将向你展示如何在你的 Nuxt 应用中实现基本的用户注册与鉴权。",{"path":305,"title":306,"description":307},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fevents","创建自定义事件","Nuxt 提供了一个由 hookable 驱动的强大事件系统。",{"path":309,"title":310,"description":311},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features","实验性特性","启用 Nuxt 实验性特性以解锁新的可能性。",{"path":313,"title":314,"description":315},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Ffeatures","特性开关","启用或禁用可选的 Nuxt 特性，以解锁新的可能性。",{"path":317,"title":318,"description":319},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Finternals","Nuxt 是如何工作的？","Nuxt 是一个极简但高度可定制的框架，用于构建 Web 应用。",{"path":321,"title":322,"description":323},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fruntime-config","运行时配置","Nuxt 提供了一套运行时配置 API，以在你的应用内暴露配置和密钥。",{"path":325,"title":326,"description":327},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","Nightly 发布通道","nightly 发布通道允许使用直接从仓库最新提交构建的 Nuxt。",{"path":329,"title":330,"description":331},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fhooks","生命周期钩子","Nuxt 提供了一个强大的钩子系统，可使用钩子扩展几乎每个方面。",{"path":333,"title":334,"description":335},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fkit","Nuxt Kit","@nuxt\u002Fkit 提供了面向模块作者的功能。",{"path":337,"title":338,"description":339},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnuxt-app","NuxtApp","在 Nuxt 中，你可以在组合式函数、组件和插件中访问运行时应用上下文。",{"path":341,"title":342,"description":343},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Flayers","编写 Nuxt Layers","Nuxt 提供了一个强大的系统，允许你扩展默认文件、配置等等。",{"path":345,"title":346,"description":347},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fbuilders","创建 Builder","了解 Nuxt builder 是如何工作的，以及如何编写你自己的 builder。",{"path":349,"title":350,"description":351},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fdebugging","调试","在 Nuxt 中，你可以直接在浏览器中以及你的 IDE 里开始调试你的应用。",{"path":353,"title":354,"description":354},"\u002Fdocs\u002Fguide\u002Fgoing-further","",{"path":356,"title":357,"description":358},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fclient-only","\u003CClientOnly>","使用 \u003CClientOnly> 组件仅在客户端渲染组件。",{"path":360,"title":361,"description":362},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fdev-only","\u003CDevOnly>","使用 \u003CDevOnly> 组件仅在开发期间渲染组件。",{"path":364,"title":365,"description":366},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","\u003CNuxtClientFallback>","Nuxt 提供了 \u003CNuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容",{"path":368,"title":369,"description":370},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-picture","\u003CNuxtPicture>","Nuxt 提供了 \u003CNuxtPicture> 组件来处理自动图像优化。",{"path":372,"title":373,"description":374},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fteleports","\u003CTeleport>","\u003CTeleport> 组件将组件传送到 DOM 中的另一个位置。",{"path":376,"title":377,"description":378},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","\u003CNuxtRouteAnnouncer>","\u003CNuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，用于向辅助技术播报路由变化。",{"path":380,"title":381,"description":382},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-time","\u003CNuxtTime>","\u003CNuxtTime> 组件以本地化友好的格式显示时间，并保持服务端-客户端一致。",{"path":384,"title":385,"description":386},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","\u003CNuxtAnnouncer>","\u003CNuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术播报动态内容变化。",{"path":388,"title":389,"description":390},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-page","\u003CNuxtPage>","\u003CNuxtPage> 组件用于显示位于 pages\u002F 目录中的页面。",{"path":392,"title":393,"description":394},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-layout","\u003CNuxtLayout>","Nuxt 提供了 \u003CNuxtLayout> 组件，用于在页面和错误页面上显示布局。",{"path":396,"title":397,"description":398},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link","\u003CNuxtLink>","Nuxt 提供了 \u003CNuxtLink> 组件来处理应用内的各类链接。",{"path":400,"title":401,"description":402},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","\u003CNuxtLoadingIndicator>","在页面导航之间显示进度条。",{"path":404,"title":405,"description":406},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","\u003CNuxtErrorBoundary>","\u003CNuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。",{"path":408,"title":409,"description":410},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","\u003CNuxtWelcome>","\u003CNuxtWelcome> 组件用于欢迎通过启动模板创建的新项目的用户。",{"path":412,"title":413,"description":414},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-island","\u003CNuxtIsland>","Nuxt 提供了 \u003CNuxtIsland> 组件，用于渲染无客户端 JS 的非交互式组件。",{"path":416,"title":417,"description":418},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-img","\u003CNuxtImg>","Nuxt 提供了 \u003CNuxtImg> 组件来处理自动图像优化。",{"path":420,"title":421,"description":422},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","createUseAsyncData","一个工厂函数，用于创建带有预定义默认选项的自定义 useAsyncData 组合式函数。",{"path":424,"title":425,"description":426},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","createUseFetch","一个工厂函数，用于创建带有预定义默认选项的自定义 useFetch 组合式函数。",{"path":428,"title":429,"description":430},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fon-prehydrate","onPrehydrate","使用 onPrehydrate 在 Nuxt 对页面进行 hydration 之前的客户端立即运行回调。",{"path":432,"title":433,"description":434},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-announcer","useAnnouncer","一个用于向屏幕阅读器播报消息的组合式函数。",{"path":436,"title":437,"description":438},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-app-config","useAppConfig","访问在项目中定义的可响应 app config。",{"path":440,"title":441,"description":442},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data","useAsyncData","useAsyncData 以 SSR 友好的方式提供对异步解析数据的访问。",{"path":444,"title":445,"description":446},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-cookie","useCookie","useCookie 是一个 SSR 友好的组合式函数，用于读写 cookie。",{"path":448,"title":449,"description":450},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-error","useError","useError 组合式函数返回正在被处理的全局 Nuxt 错误。",{"path":452,"title":453,"description":454},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch","useFetch","使用 SSR 友好的组合式函数从 API 端点获取数据。",{"path":456,"title":457,"description":458},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head","useHead","useHead 用于自定义 Nuxt 应用各个页面的 head 属性。",{"path":460,"title":461,"description":462},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head-safe","useHeadSafe","处理用户输入时提供 head 数据的推荐方式。",{"path":464,"title":465,"description":466},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-hydration","useHydration","允许完全控制 hydration 周期，以便从服务端设置和接收数据。",{"path":468,"title":469,"description":470},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-layout","useLayout","useLayout 返回为当前路由解析出的布局。",{"path":472,"title":473,"description":474},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","useLazyAsyncData","该组合式函数包装 useAsyncData，会在 handler 解析之前立即触发导航。",{"path":476,"title":477,"description":478},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","useLazyFetch","该组合式函数是对 useFetch 的封装，会在 handler 解析之前立即触发导航。",{"path":480,"title":481,"description":482},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","useLoadingIndicator","该组合式函数让你访问应用页面的加载状态。",{"path":484,"title":485,"description":486},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","useNuxtApp","访问 Nuxt 应用的共享运行时上下文。",{"path":488,"title":489,"description":490},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","useNuxtData","访问数据获取组合式函数的当前缓存值。",{"path":492,"title":493,"description":494},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","usePreviewMode","使用 usePreviewMode 检查并控制 Nuxt 的预览模式",{"path":496,"title":497,"description":498},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-event","useRequestEvent","使用 useRequestEvent 组合式函数访问传入的请求事件。",{"path":500,"title":501,"description":502},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","useRequestFetch","使用 useRequestFetch 组合式函数为服务端 fetch 请求转发请求上下文和请求头。",{"path":504,"title":505,"description":506},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-header","useRequestHeader","使用 useRequestHeader 访问某个特定的传入请求头。",{"path":508,"title":509,"description":510},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-headers","useRequestHeaders","使用 useRequestHeaders 访问传入的请求头。",{"path":512,"title":513,"description":514},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-url","useRequestURL","使用 useRequestURL 组合式函数访问传入的请求 URL。",{"path":516,"title":517,"description":518},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-response-header","useResponseHeader","使用 useResponseHeader 设置服务端响应头。",{"path":520,"title":521,"description":522},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route","useRoute","useRoute 组合式函数返回当前路由。",{"path":524,"title":525,"description":526},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","useRouteAnnouncer","该组合式函数监视页面标题变化，并相应地更新播报消息。",{"path":528,"title":529,"description":530},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-router","useRouter","useRouter 组合式函数返回 router 实例。",{"path":532,"title":533,"description":534},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","useRuntimeConfig","使用 useRuntimeConfig 组合式函数访问运行时配置变量。",{"path":536,"title":537,"description":538},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","useRuntimeHook","在 Nuxt 应用中注册一个运行时钩子，并确保在作用域销毁时被正确清理。",{"path":540,"title":541,"description":542},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","useSeoMeta","useSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":544,"title":545,"description":546},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","useServerSeoMeta","useServerSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":548,"title":549,"description":550},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-state","useState","useState 组合式函数创建一个可响应的、SSR 友好的共享状态。",{"path":552,"title":553,"description":554},"\u002Fdocs\u002Fapi\u002Futils\u002Fdollarfetch","$fetch","Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于发起 HTTP 请求。",{"path":556,"title":557,"description":558},"\u002Fdocs\u002Fapi\u002Futils\u002Fabort-navigation","abortNavigation","abortNavigation 是一个辅助函数，用于阻止导航的发生，并在设置了参数时抛出错误。",{"path":560,"title":561,"description":562},"\u002Fdocs\u002Fapi\u002Futils\u002Fadd-route-middleware","addRouteMiddleware","addRouteMiddleware() 是一个在你的应用中动态添加中间件的辅助函数。",{"path":564,"title":565,"description":566},"\u002Fdocs\u002Fapi\u002Futils\u002Fcall-once","callOnce","在 SSR 或 CSR 期间只运行一次给定的函数或代码块。",{"path":568,"title":569,"description":570},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-error","clearError","clearError 组合式函数清除所有已处理的错误。",{"path":572,"title":573,"description":574},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-data","clearNuxtData","删除 useAsyncData 和 useFetch 的缓存数据、错误状态和挂起的 promise。",{"path":576,"title":577,"description":578},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-state","clearNuxtState","删除 useState 的缓存状态。",{"path":580,"title":581,"description":582},"\u002Fdocs\u002Fapi\u002Futils\u002Fcreate-error","createError","创建一个带有附加元数据的错误对象。",{"path":584,"title":585,"description":586},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","defineLazyHydrationComponent","使用特定策略定义一个懒加载 hydration 组件。",{"path":588,"title":589,"description":590},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-component","defineNuxtComponent","defineNuxtComponent() 是一个用于使用 Options API 定义类型安全组件的辅助函数。",{"path":592,"title":593,"description":594},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","defineNuxtPlugin","defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。",{"path":596,"title":597,"description":598},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","defineNuxtRouteMiddleware","使用 defineNuxtRouteMiddleware 辅助函数创建命名路由中间件。",{"path":600,"title":601,"description":602},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-page-meta","definePageMeta","为你的页面组件定义元数据。",{"path":604,"title":605,"description":606},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-route-rules","defineRouteRules","在页面层面定义用于混合渲染的路由规则。",{"path":608,"title":609,"description":610},"\u002Fdocs\u002Fapi\u002Futils\u002Fnavigate-to","navigateTo","navigateTo 是一个用于以编程方式导航用户的辅助函数。",{"path":612,"title":613,"description":614},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-leave","onBeforeRouteLeave","onBeforeRouteLeave 组合式函数允许在组件内部注册一个路由守卫。",{"path":616,"title":617,"description":618},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-update","onBeforeRouteUpdate","onBeforeRouteUpdate 组合式函数允许在组件内部注册一个路由守卫。",{"path":620,"title":621,"description":622},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-nuxt-ready","onNuxtReady","onNuxtReady 组合式函数允许在你的应用完成初始化之后运行一个回调。",{"path":624,"title":625,"description":626},"\u002Fdocs\u002Fapi\u002Futils\u002Fprefetch-components","prefetchComponents","Nuxt 提供了用于在预取组件方面给予你控制的工具。",{"path":628,"title":629,"description":630},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-components","preloadComponents","Nuxt 提供了用于在预加载组件方面给予你控制的工具。",{"path":632,"title":633,"description":634},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-route-components","preloadRouteComponents","preloadRouteComponents 允许你手动预加载 Nuxt 应用中的单个页面。",{"path":636,"title":637,"description":638},"\u002Fdocs\u002Fapi\u002Futils\u002Fprerender-routes","prerenderRoutes","prerenderRoutes 向 Nitro 暗示预渲染一个额外的路由。",{"path":640,"title":641,"description":642},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-cookie","refreshCookie","当 cookie 发生变化时，手动刷新 useCookie 的值",{"path":644,"title":645,"description":646},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-nuxt-data","refreshNuxtData","刷新 Nuxt 中所有或特定的 asyncData 实例",{"path":648,"title":649,"description":650},"\u002Fdocs\u002Fapi\u002Futils\u002Freload-nuxt-app","reloadNuxtApp","reloadNuxtApp 会对页面执行一次硬刷新。",{"path":652,"title":653,"description":654},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-page-layout","setPageLayout","setPageLayout 允许你动态更改页面的布局。",{"path":656,"title":657,"description":658},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-response-status","setResponseStatus","setResponseStatus 设置响应的状态码（以及可选的 statusText）。",{"path":660,"title":661,"description":662},"\u002Fdocs\u002Fapi\u002Futils\u002Fshow-error","showError","Nuxt 提供了一种快速且简单的方式，在需要的时候显示全屏错误页。",{"path":664,"title":665,"description":666},"\u002Fdocs\u002Fapi\u002Futils\u002Fupdate-app-config","updateAppConfig","在运行时更新 App Config。",{"path":668,"title":669,"description":670},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fadd","nuxt add","在你的 Nuxt 应用中快速搭建一个实体（文件）。",{"path":672,"title":673,"description":674},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fanalyze","nuxt analyze","分析生产环境的打包产物或你的 Nuxt 应用。",{"path":676,"title":677,"description":678},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild","nuxt build","构建你的 Nuxt 应用。",{"path":680,"title":681,"description":682},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild-module","nuxt build-module","用于在发布前构建你的 Nuxt 模块的 Nuxt 命令。",{"path":684,"title":685,"description":686},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fcleanup","nuxt cleanup","移除常见的 Nuxt 生成文件和缓存。",{"path":688,"title":689,"description":690},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdev","nuxt dev","dev 命令会在 http:\u002F\u002Flocalhost:3000 启动一个带有热模块替换（HMR）的开发服务器。",{"path":692,"title":693,"description":694},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdevtools","nuxt devtools","devtools 命令允许你基于每个项目启用或禁用 Nuxt DevTools。",{"path":696,"title":697,"description":698},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fgenerate","nuxt generate","预渲染应用的每一个路由，并将结果存储为纯 HTML 文件。",{"path":700,"title":701,"description":702},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finfo","nuxt info","info 命令会记录当前或指定 Nuxt 项目的相关信息。",{"path":704,"title":705,"description":706},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finit","create nuxt","init 命令用于初始化一个全新的 Nuxt 项目。",{"path":708,"title":709,"description":710},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fmodule","nuxt module","通过命令行搜索并向你的 Nuxt 应用添加模块。",{"path":712,"title":713,"description":714},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fprepare","nuxt prepare","prepare 命令会在你的应用中创建一个 .nuxt 目录并生成类型。",{"path":716,"title":717,"description":718},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fpreview","nuxt preview","preview 命令会启动一个服务器，用于在运行 build 命令后预览你的应用。",{"path":720,"title":721,"description":722},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftest","nuxt test","test 命令使用 @nuxt\u002Ftest-utils 运行测试。",{"path":724,"title":725,"description":726},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftypecheck","nuxt typecheck","typecheck 命令运行 vue-tsc 来全量检查你的应用类型。",{"path":728,"title":729,"description":730},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fupgrade","nuxt upgrade","upgrade 命令将 Nuxt 升级到最新版本。",{"path":732,"title":733,"description":734},"\u002Fdocs\u002Fapi\u002Fkit\u002Fmodules","Modules","Nuxt Kit 提供了一系列工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块，或复用已有的模块。",{"path":736,"title":737,"description":738},"\u002Fdocs\u002Fapi\u002Fkit\u002Fruntime-config","Runtime Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 运行时配置。",{"path":740,"title":741,"description":742},"\u002Fdocs\u002Fapi\u002Fkit\u002Ftemplates","Templates","Nuxt Kit 提供了一系列工具，帮助你处理模板。这些函数允许你在开发和构建期间生成额外的文件。",{"path":744,"title":745,"description":746},"\u002Fdocs\u002Fapi\u002Fkit\u002Fapp-config","App Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 应用配置。",{"path":748,"title":749,"description":750},"\u002Fdocs\u002Fapi\u002Fkit\u002Fnitro","Nitro","Nuxt Kit 提供了一系列工具，帮助你使用 Nitro。这些函数允许你添加服务器处理器、插件和预渲染路由。",{"path":752,"title":753,"description":754},"\u002Fdocs\u002Fapi\u002Fkit\u002Fresolving","Resolving","Nuxt Kit 提供了从 Nuxt 根目录或自定义基准路径解析路径的实用工具。",{"path":756,"title":757,"description":758},"\u002Fdocs\u002Fapi\u002Fkit\u002Flogging","Logging","Nuxt Kit 提供了一系列工具，帮助你使用日志记录。这些函数允许你以额外功能记录消息。",{"path":760,"title":761,"description":762},"\u002Fdocs\u002Fapi\u002Fkit\u002Fbuilder","Builder","Nuxt Kit 提供了一系列工具，帮助你使用构建器。这些函数允许你扩展 Vite 和 webpack 配置。",{"path":764,"title":765,"description":766},"\u002Fdocs\u002Fapi\u002Fkit\u002Fexamples","Examples","Nuxt Kit 工具的使用示例。",{"path":768,"title":58,"description":769},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayers","Nuxt Kit 提供了帮助你处理层及其目录结构的工具。",{"path":771,"title":772,"description":773},"\u002Fdocs\u002Fapi\u002Fkit\u002Fprogrammatic","Programmatic Usage","Nuxt Kit 提供了一系列工具，帮助你以编程方式使用 Nuxt。这些函数允许你加载 Nuxt、构建 Nuxt，以及加载 Nuxt 配置。",{"path":775,"title":776,"description":777},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcompatibility","Compatibility","Nuxt Kit 提供了一系列工具，帮助你检查模块与不同 Nuxt 版本的兼容性。",{"path":779,"title":780,"description":781},"\u002Fdocs\u002Fapi\u002Fkit\u002Fautoimports","Auto-imports","Nuxt Kit 提供了一系列工具，帮助你处理自动导入。这些函数允许你注册自己的 utils、composables 和 Vue API。",{"path":783,"title":784,"description":785},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents","Components","Nuxt Kit 提供了一系列工具，帮助你处理组件。你可以全局或局部注册组件，也可以添加要被扫描的目录。",{"path":787,"title":788,"description":789},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcontext","Context","Nuxt Kit 提供了一系列工具，帮助你处理上下文。",{"path":791,"title":792,"description":793},"\u002Fdocs\u002Fapi\u002Fkit\u002Fpages","Pages","Nuxt Kit 提供了一系列工具，帮助你创建和使用页面。你可以使用这些工具来操作页面配置或定义路由规则。",{"path":795,"title":796,"description":797},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayout","Layout","Nuxt Kit 提供了一系列工具，帮助你处理布局。",{"path":799,"title":800,"description":801},"\u002Fdocs\u002Fapi\u002Fkit\u002Fhead","Head","Nuxt Kit 提供了一系列工具，帮助你在模块中管理 head 配置。",{"path":803,"title":804,"description":805},"\u002Fdocs\u002Fapi\u002Fkit\u002Fplugins","Plugins","Nuxt Kit 提供了一系列工具，帮助你创建和使用插件。你可以使用这些函数向你的模块添加插件或插件模板。",{"path":807,"title":330,"description":808},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fhooks","Nuxt 提供了一套强大的钩子系统，可以通过钩子扩展几乎各个方面。",{"path":810,"title":811,"description":812},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fimport-meta","Import meta","使用 `import.meta` 了解你的代码运行在何处。",{"path":814,"title":815,"description":816},"\u002Fdocs\u002Fapi\u002Fnuxt-config","Nuxt 配置","发现你可以在 nuxt.config.ts 文件中使用的所有选项。",{"path":818,"title":819,"description":820},"\u002Fdocs\u002Fapi","Nuxt API 参考","探索所有 Nuxt 内部机制：组件、组合式函数、工具函数、命令等等。",{"path":822,"title":823,"description":824},"\u002Fdocs\u002Fcommunity\u002Fgetting-help","获取帮助","我们是一个友好的开发者社区，很乐意提供帮助。",{"path":826,"title":827,"description":828},"\u002Fdocs\u002Fcommunity\u002Freporting-bugs","报告 Bug","开源中最有价值的角色之一，就是花时间把 bug 报告得清楚明白。",{"path":830,"title":831,"description":832},"\u002Fdocs\u002Fcommunity\u002Fcontribution","贡献","Nuxt 是一个社区项目——因此我们欢迎各种形式的贡献！❤️",{"path":834,"title":835,"description":836},"\u002Fdocs\u002Fcommunity\u002Fframework-contribution","框架贡献","关于向框架仓库贡献的一些具体要点。",{"path":838,"title":839,"description":840},"\u002Fdocs\u002Fcommunity\u002Froadmap","路线图","Nuxt 在不断发展，新功能和模块一直在增加。",{"path":842,"title":843,"description":844},"\u002Fdocs\u002Fcommunity\u002Fchangelog","发布","发现 Nuxt 及 Nuxt 官方模块的最新发布。",{"path":846,"title":847,"description":848},"\u002Fdocs\u002Fbridge\u002Foverview","概述","缩小与 Nuxt 3 的差异，并减轻迁移到 Nuxt 3 的负担。",{"path":850,"title":14,"description":851},"\u002Fdocs\u002Fbridge\u002Fconfiguration","了解如何根据你的需求配置 Nuxt Bridge。",{"path":853,"title":222,"description":854},"\u002Fdocs\u002Fbridge\u002Ftypescript","了解如何在 Nuxt Bridge 中使用 TypeScript。",{"path":856,"title":857,"description":858},"\u002Fdocs\u002Fbridge\u002Fbridge-composition-api","旧版 Composition API","了解如何使用 Nuxt Bridge 迁移到 Composition API。",{"path":860,"title":861,"description":862},"\u002Fdocs\u002Fbridge\u002Fplugins-and-middleware","插件和中间件","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。",{"path":864,"title":865,"description":866},"\u002Fdocs\u002Fbridge\u002Fnuxt3-compatible-api","新的 Composition API","Nuxt Bridge 实现了与 Nuxt 3 兼容的组合式函数。",{"path":868,"title":869,"description":870},"\u002Fdocs\u002Fbridge\u002Fmeta","Meta 标签","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新 meta 标签。",{"path":872,"title":322,"description":873},"\u002Fdocs\u002Fbridge\u002Fruntime-config","Nuxt 提供了一个运行时配置 API，用于在应用中暴露配置和密钥。",{"path":875,"title":749,"description":876},"\u002Fdocs\u002Fbridge\u002Fnitro","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Nitro。",{"path":878,"title":879,"description":880},"\u002Fdocs\u002Fbridge\u002Fvite","Vite","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Vite。",{"path":882,"title":847,"description":883},"\u002Fdocs\u002Fmigration\u002Foverview","Nuxt 3 是对 Nuxt 2 的完整重写，并且基于一套全新的底层技术。",{"path":885,"title":886,"description":887},"\u002Fdocs\u002Fmigration\u002Fbundling","构建工具","了解如何从 Nuxt 2 迁移到 Nuxt 3 的构建工具。",{"path":889,"title":890,"description":891},"\u002Fdocs\u002Fmigration\u002Fserver","服务器","了解如何从 Nuxt 2 迁移到 Nuxt 3 的服务器。",{"path":893,"title":14,"description":894},"\u002Fdocs\u002Fmigration\u002Fconfiguration","了解如何从 Nuxt 2 迁移到 Nuxt 3 的新配置。",{"path":896,"title":214,"description":897},"\u002Fdocs\u002Fmigration\u002Fmodule-authors","了解如何从 Nuxt 2 迁移到 Nuxt 3 模块。",{"path":899,"title":206,"description":900},"\u002Fdocs\u002Fmigration\u002Fauto-imports","Nuxt 3 采用最小摩擦的方式，即在任何可能的地方自动导入组件和组合式函数。",{"path":902,"title":869,"description":903},"\u002Fdocs\u002Fmigration\u002Fmeta","管理你的 meta 标签，从 Nuxt 2 到 Nuxt 3。",{"path":905,"title":861,"description":906},"\u002Fdocs\u002Fmigration\u002Fplugins-and-middleware","了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。",{"path":908,"title":909,"description":910},"\u002Fdocs\u002Fmigration\u002Fpages-and-layouts","页面和布局","了解如何从 Nuxt 2 迁移到 Nuxt 3 的页面和布局。",{"path":912,"title":913,"description":914},"\u002Fdocs\u002Fmigration\u002Fcomponent-options","组件选项","了解如何从 Nuxt 2 的组件选项迁移到 Nuxt 3 的组合式函数。",{"path":916,"title":322,"description":917},"\u002Fdocs\u002Fmigration\u002Fruntime-config","了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。",{"path":919,"title":920,"description":921},"\u002Fdocs\u002Freadme","Nuxt 文档","本仓库包含 Nuxt 的文档，托管于 https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fintroduction",{"path":923,"title":924,"description":925},"\u002Fdocs\u002Ferrors\u002Fb5001","NUXT_B5001","缺少 compatibilityDate (兼容性日期)",{"path":927,"title":928,"description":929},"\u002Fdocs\u002Ferrors\u002Fb5003","NUXT_B5003","保留的 runtimeConfig.app 命名空间",{"path":931,"title":932,"description":933},"\u002Fdocs\u002Ferrors\u002Fb5004","NUXT_B5004","不支持外部配置文件",{"path":935,"title":936,"description":937},"\u002Fdocs\u002Ferrors\u002Fe1001","NUXT_E1001","在 Nuxt 上下文之外调用了组合式函数。",{"path":939,"title":940,"description":941},"\u002Fdocs\u002Ferrors\u002Fe1006","NUXT_E1006","onPrehydrate 未被构建流水线处理。",{"path":943,"title":944,"description":945},"\u002Fdocs\u002Ferrors\u002Fe1007","NUXT_E1007","编译期提示辅助函数在运行时被调用。",{"path":947,"title":948,"description":949},"\u002Fdocs\u002Ferrors\u002Fe2001","NUXT_E2001","外部导航未设置 external: true。",{"path":951,"title":952,"description":953},"\u002Fdocs\u002Ferrors\u002Fe2002","NUXT_E2002","使用了危险协议的导航。",{"path":955,"title":956,"description":957},"\u002Fdocs\u002Ferrors\u002Fe2003","NUXT_E2003","abortNavigation() 在中间件之外被调用。",{"path":959,"title":960,"description":961},"\u002Fdocs\u002Ferrors\u002Fe2004","NUXT_E2004","未知的路由中间件。",{"path":963,"title":964,"description":965},"\u002Fdocs\u002Ferrors\u002Fe2005","NUXT_E2005","在中间件内调用了 useRoute。",{"path":967,"title":968,"description":969},"\u002Fdocs\u002Ferrors\u002Fe2007","NUXT_E2007","在组件中于服务端调用了 setPageLayout。",{"path":971,"title":972,"description":973},"\u002Fdocs\u002Ferrors\u002Fe3001","NUXT_E3001","useFetch 的请求 URL 以 \"\u002F\u002F\" 开头。",{"path":975,"title":976,"description":977},"\u002Fdocs\u002Ferrors\u002Fe3008","NUXT_E3008","useAsyncData 的 key 必须是非空字符串。",{"path":979,"title":980,"description":981},"\u002Fdocs\u002Ferrors\u002Fe3009","NUXT_E3009","useAsyncData 的处理函数必须是一个函数。",{"path":983,"title":984,"description":985},"\u002Fdocs\u002Ferrors\u002Fe4012","NUXT_E4012","无法解析 island（岛）响应。",{"path":987,"title":988,"description":989},"\u002Fdocs\u002Ferrors\u002Fe4016","NUXT_E4016","嵌套页面无法显示，因为其父页面没有渲染 \u003CNuxtPage \u002F>。",{"path":991,"title":992,"description":993},"\u002Fdocs\u002Ferrors\u002Fe5001","NUXT_E5001","应用清单（app manifest）未启用。",{"path":995,"title":996,"description":997},"\u002Fdocs\u002Ferrors\u002Fe6001","NUXT_E6001","缺少 Unhead 实例。",{"path":999,"title":1000,"description":1001},"\u002Fdocs\u002Ferrors\u002Fe7001","NUXT_E7001","Payload URL 包含主机名。",{"path":1003,"title":1004,"description":1005},"\u002Fdocs\u002Ferrors\u002Fe7007","NUXT_E7007","useState 的初始化值必须是一个函数。",{"path":1007,"title":1008,"description":1009},"\u002Fdocs\u002Ferrors\u002Fe7008","NUXT_E7008","callOnce 的 fn 必须是一个函数。",{"path":1011,"title":1012,"description":1013},"\u002Fdocs\u002Ferrors\u002Fe7009","NUXT_E7009","useState 的 key 必须是一个字符串。",{"path":1015,"title":1016,"description":1017},"\u002Fdocs\u002Ferrors\u002Fe7010","NUXT_E7010","callOnce 的 key 必须是一个字符串。",{"id":1019,"title":238,"body":1020,"description":239,"extension":2652,"meta":2653,"navigation":2654,"path":237,"seo":2655,"stem":2656,"__hash__":2657},"docs\u002Fdocs\u002F3.guide\u002F2.best-practices\u002Fperformance.md",{"type":1021,"value":1022,"toc":2645},"minimark",[1023,1035,1039,1042,1046,1062,1178,1181,1184,1309,2641],[1024,1025,1026,1027,1034],"p",{},"Nuxt 内置了旨在提升应用性能、并有助于改善 ",[1028,1029,1033],"a",{"href":1030,"rel":1031},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",[1032],"nofollow","Core Web Vitals"," 的特性。此外还有多个 Nuxt 核心模块，可协助在特定领域提升性能。本指南概述了优化 Nuxt 应用性能的最佳实践。",[1036,1037,1038],"h2",{"id":1038},"内置特性",[1024,1040,1041],{},"Nuxt 提供了若干内置特性来帮助你优化网站性能。理解这些特性的运作方式，对于获得极速性能至关重要。",[1043,1044,1045],"h3",{"id":1045},"链接",[1024,1047,1048,1053,1054,1057,1058,1061],{},[1028,1049,1050],{"href":396},[1051,1052,397],"code",{}," 是 Vue Router 的 ",[1051,1055,1056],{},"\u003CRouterLink>"," 组件和 HTML ",[1051,1059,1060],{},"\u003Ca>"," 标签的即插即用替代品。它会智能判断链接是内部还是外部，并据此渲染，附带可用优化（预取、默认属性等）。",[1063,1064,1068],"pre",{"className":1065,"code":1066,"language":1067,"meta":354,"style":354},"language-html shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","\u003Ctemplate>\n  \u003CNuxtLink to=\"\u002Fabout\">关于页\u003C\u002FNuxtLink>\n\u003C\u002Ftemplate>\n\n\u003C!-- 结合 Vue Router 与智能预取后，会渲染为 -->\n\u003Ca href=\"\u002Fabout\">关于页\u003C\u002Fa>\n","html",[1051,1069,1070,1086,1127,1136,1143,1150],{"__ignoreMap":354},[1071,1072,1075,1079,1083],"span",{"class":1073,"line":1074},"line",1,[1071,1076,1078],{"class":1077},"sF54B","\u003C",[1071,1080,1082],{"class":1081},"s6g6u","template",[1071,1084,1085],{"class":1077},">\n",[1071,1087,1089,1092,1096,1100,1103,1107,1111,1113,1116,1120,1123,1125],{"class":1073,"line":1088},2,[1071,1090,1091],{"class":1077},"  \u003C",[1071,1093,1095],{"class":1094},"se1bN","NuxtLink",[1071,1097,1099],{"class":1098},"sXjFp"," to",[1071,1101,1102],{"class":1077},"=",[1071,1104,1106],{"class":1105},"s0jeK","\"",[1071,1108,1110],{"class":1109},"s-Aze","\u002Fabout",[1071,1112,1106],{"class":1105},[1071,1114,1115],{"class":1077},">",[1071,1117,1119],{"class":1118},"smVNa","关于页",[1071,1121,1122],{"class":1077},"\u003C\u002F",[1071,1124,1095],{"class":1094},[1071,1126,1085],{"class":1077},[1071,1128,1130,1132,1134],{"class":1073,"line":1129},3,[1071,1131,1122],{"class":1077},[1071,1133,1082],{"class":1081},[1071,1135,1085],{"class":1077},[1071,1137,1139],{"class":1073,"line":1138},4,[1071,1140,1142],{"emptyLinePlaceholder":1141},true,"\n",[1071,1144,1146],{"class":1073,"line":1145},5,[1071,1147,1149],{"class":1148},"sZqJ9","\u003C!-- 结合 Vue Router 与智能预取后，会渲染为 -->\n",[1071,1151,1153,1155,1157,1160,1162,1164,1166,1168,1170,1172,1174,1176],{"class":1073,"line":1152},6,[1071,1154,1078],{"class":1077},[1071,1156,1028],{"class":1081},[1071,1158,1159],{"class":1098}," href",[1071,1161,1102],{"class":1077},[1071,1163,1106],{"class":1105},[1071,1165,1110],{"class":1109},[1071,1167,1106],{"class":1105},[1071,1169,1115],{"class":1077},[1071,1171,1119],{"class":1118},[1071,1173,1122],{"class":1077},[1071,1175,1028],{"class":1081},[1071,1177,1085],{"class":1077},[1024,1179,1180],{},"Nuxt 会自动包含智能预取。这意味着它能检测链接何时可见（默认如此），无论是在视口中还是滚动时，并预取这些页面的 JavaScript，以便在用户点击链接时已准备就绪。",[1024,1182,1183],{},"你也可以改为在交互时预取：",[1063,1185,1189],{"className":1186,"code":1187,"language":1188,"meta":354,"style":354},"language-ts shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","export default defineNuxtConfig({\n  experimental: {\n    defaults: {\n      nuxtLink: {\n        prefetchOn: {\n          interaction: true,\n          visibility: false,\n        },\n      },\n    },\n  },\n})\n","ts",[1051,1190,1191,1210,1222,1231,1240,1249,1263,1276,1282,1288,1294,1300],{"__ignoreMap":354},[1071,1192,1193,1197,1200,1204,1207],{"class":1073,"line":1074},[1071,1194,1196],{"class":1195},"szyBz","export",[1071,1198,1199],{"class":1195}," default",[1071,1201,1203],{"class":1202},"srJn9"," defineNuxtConfig",[1071,1205,1206],{"class":1118},"(",[1071,1208,1209],{"class":1077},"{\n",[1071,1211,1212,1216,1219],{"class":1073,"line":1088},[1071,1213,1215],{"class":1214},"sOtFm","  experimental",[1071,1217,1218],{"class":1077},":",[1071,1220,1221],{"class":1077}," {\n",[1071,1223,1224,1227,1229],{"class":1073,"line":1129},[1071,1225,1226],{"class":1214},"    defaults",[1071,1228,1218],{"class":1077},[1071,1230,1221],{"class":1077},[1071,1232,1233,1236,1238],{"class":1073,"line":1138},[1071,1234,1235],{"class":1214},"      nuxtLink",[1071,1237,1218],{"class":1077},[1071,1239,1221],{"class":1077},[1071,1241,1242,1245,1247],{"class":1073,"line":1145},[1071,1243,1244],{"class":1214},"        prefetchOn",[1071,1246,1218],{"class":1077},[1071,1248,1221],{"class":1077},[1071,1250,1251,1254,1256,1260],{"class":1073,"line":1152},[1071,1252,1253],{"class":1214},"          interaction",[1071,1255,1218],{"class":1077},[1071,1257,1259],{"class":1258},"si1Qm"," true",[1071,1261,1262],{"class":1077},",\n",[1071,1264,1266,1269,1271,1274],{"class":1073,"line":1265},7,[1071,1267,1268],{"class":1214},"          visibility",[1071,1270,1218],{"class":1077},[1071,1272,1273],{"class":1258}," false",[1071,1275,1262],{"class":1077},[1071,1277,1279],{"class":1073,"line":1278},8,[1071,1280,1281],{"class":1077},"        },\n",[1071,1283,1285],{"class":1073,"line":1284},9,[1071,1286,1287],{"class":1077},"      },\n",[1071,1289,1291],{"class":1073,"line":1290},10,[1071,1292,1293],{"class":1077},"    },\n",[1071,1295,1297],{"class":1073,"line":1296},11,[1071,1298,1299],{"class":1077},"  },\n",[1071,1301,1303,1306],{"class":1073,"line":1302},12,[1071,1304,1305],{"class":1077},"}",[1071,1307,1308],{"class":1118},")\n",[1310,1311,1312,1315,1318,1321,1478,1481],"read-more",{"title":1095,"to":396},[1043,1313,1314],{"id":1314},"混合渲染",[1024,1316,1317],{},"在更复杂的应用中，我们可能需要完全控制应用的渲染方式，以支持某些页面在构建时生成、而另一些应客户端渲染的情况。",[1024,1319,1320],{},"混合渲染允许通过路由规则为每条路由设置不同的缓存规则，并决定服务器应如何响应给定 URL 上的新请求：",[1063,1322,1324],{"className":1186,"code":1323,"language":1188,"meta":354,"style":354},"export default defineNuxtConfig({\n  routeRules: {\n    '\u002F': {\n      prerender: true,\n    },\n    '\u002Fproducts\u002F**': {\n      swr: 3600,\n    },\n    '\u002Fblog': {\n      isr: 3600,\n    },\n    '\u002Fadmin\u002F**': {\n      ssr: false,\n    },\n  },\n})\n",[1051,1325,1326,1338,1347,1363,1374,1378,1391,1404,1408,1421,1432,1436,1449,1461,1466,1471],{"__ignoreMap":354},[1071,1327,1328,1330,1332,1334,1336],{"class":1073,"line":1074},[1071,1329,1196],{"class":1195},[1071,1331,1199],{"class":1195},[1071,1333,1203],{"class":1202},[1071,1335,1206],{"class":1118},[1071,1337,1209],{"class":1077},[1071,1339,1340,1343,1345],{"class":1073,"line":1088},[1071,1341,1342],{"class":1214},"  routeRules",[1071,1344,1218],{"class":1077},[1071,1346,1221],{"class":1077},[1071,1348,1349,1352,1356,1359,1361],{"class":1073,"line":1129},[1071,1350,1351],{"class":1105},"    '",[1071,1353,1355],{"class":1354},"sSD0A","\u002F",[1071,1357,1358],{"class":1105},"'",[1071,1360,1218],{"class":1077},[1071,1362,1221],{"class":1077},[1071,1364,1365,1368,1370,1372],{"class":1073,"line":1138},[1071,1366,1367],{"class":1214},"      prerender",[1071,1369,1218],{"class":1077},[1071,1371,1259],{"class":1258},[1071,1373,1262],{"class":1077},[1071,1375,1376],{"class":1073,"line":1145},[1071,1377,1293],{"class":1077},[1071,1379,1380,1382,1385,1387,1389],{"class":1073,"line":1152},[1071,1381,1351],{"class":1105},[1071,1383,1384],{"class":1354},"\u002Fproducts\u002F**",[1071,1386,1358],{"class":1105},[1071,1388,1218],{"class":1077},[1071,1390,1221],{"class":1077},[1071,1392,1393,1396,1398,1402],{"class":1073,"line":1265},[1071,1394,1395],{"class":1214},"      swr",[1071,1397,1218],{"class":1077},[1071,1399,1401],{"class":1400},"sOUxV"," 3600",[1071,1403,1262],{"class":1077},[1071,1405,1406],{"class":1073,"line":1278},[1071,1407,1293],{"class":1077},[1071,1409,1410,1412,1415,1417,1419],{"class":1073,"line":1284},[1071,1411,1351],{"class":1105},[1071,1413,1414],{"class":1354},"\u002Fblog",[1071,1416,1358],{"class":1105},[1071,1418,1218],{"class":1077},[1071,1420,1221],{"class":1077},[1071,1422,1423,1426,1428,1430],{"class":1073,"line":1290},[1071,1424,1425],{"class":1214},"      isr",[1071,1427,1218],{"class":1077},[1071,1429,1401],{"class":1400},[1071,1431,1262],{"class":1077},[1071,1433,1434],{"class":1073,"line":1296},[1071,1435,1293],{"class":1077},[1071,1437,1438,1440,1443,1445,1447],{"class":1073,"line":1302},[1071,1439,1351],{"class":1105},[1071,1441,1442],{"class":1354},"\u002Fadmin\u002F**",[1071,1444,1358],{"class":1105},[1071,1446,1218],{"class":1077},[1071,1448,1221],{"class":1077},[1071,1450,1452,1455,1457,1459],{"class":1073,"line":1451},13,[1071,1453,1454],{"class":1214},"      ssr",[1071,1456,1218],{"class":1077},[1071,1458,1273],{"class":1258},[1071,1460,1262],{"class":1077},[1071,1462,1464],{"class":1073,"line":1463},14,[1071,1465,1293],{"class":1077},[1071,1467,1469],{"class":1073,"line":1468},15,[1071,1470,1299],{"class":1077},[1071,1472,1474,1476],{"class":1073,"line":1473},16,[1071,1475,1305],{"class":1077},[1071,1477,1308],{"class":1118},[1024,1479,1480],{},"Nuxt 服务器会自动注册相应的中间件，并使用 Nitro 缓存层将路由包裹在缓存处理器中。",[1310,1482,1484,1487,1494,1674,1680],{"title":1314,"to":1483},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering#hybrid-rendering",[1043,1485,1486],{"id":1486},"懒加载组件",[1024,1488,1489,1490,1493],{},"要动态导入一个组件（也称为懒加载组件），你只需在组件名称前加上 ",[1051,1491,1492],{},"Lazy"," 前缀。这在组件并非总是需要时特别有用。",[1063,1495,1497],{"className":1065,"code":1496,"language":1067,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst show = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Mountains\u003C\u002Fh1>\n    \u003CLazyMountainsList v-if=\"show\" \u002F>\n    \u003Cbutton v-if=\"!show\" @click=\"show = true\">Show List\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1051,1498,1499,1522,1546,1554,1558,1566,1575,1594,1616,1657,1666],{"__ignoreMap":354},[1071,1500,1501,1503,1506,1509,1512,1514,1516,1518,1520],{"class":1073,"line":1074},[1071,1502,1078],{"class":1077},[1071,1504,1505],{"class":1081},"script",[1071,1507,1508],{"class":1098}," setup",[1071,1510,1511],{"class":1098}," lang",[1071,1513,1102],{"class":1077},[1071,1515,1106],{"class":1105},[1071,1517,1188],{"class":1109},[1071,1519,1106],{"class":1105},[1071,1521,1085],{"class":1077},[1071,1523,1524,1528,1532,1536,1539,1541,1544],{"class":1073,"line":1088},[1071,1525,1527],{"class":1526},"sV7Px","const",[1071,1529,1531],{"class":1530},"sJTDI"," show",[1071,1533,1535],{"class":1534},"sXPRQ"," =",[1071,1537,1538],{"class":1202}," ref",[1071,1540,1206],{"class":1118},[1071,1542,1543],{"class":1258},"false",[1071,1545,1308],{"class":1118},[1071,1547,1548,1550,1552],{"class":1073,"line":1129},[1071,1549,1122],{"class":1077},[1071,1551,1505],{"class":1081},[1071,1553,1085],{"class":1077},[1071,1555,1556],{"class":1073,"line":1138},[1071,1557,1142],{"emptyLinePlaceholder":1141},[1071,1559,1560,1562,1564],{"class":1073,"line":1145},[1071,1561,1078],{"class":1077},[1071,1563,1082],{"class":1081},[1071,1565,1085],{"class":1077},[1071,1567,1568,1570,1573],{"class":1073,"line":1152},[1071,1569,1091],{"class":1077},[1071,1571,1572],{"class":1081},"div",[1071,1574,1085],{"class":1077},[1071,1576,1577,1580,1583,1585,1588,1590,1592],{"class":1073,"line":1265},[1071,1578,1579],{"class":1077},"    \u003C",[1071,1581,1582],{"class":1081},"h1",[1071,1584,1115],{"class":1077},[1071,1586,1587],{"class":1118},"Mountains",[1071,1589,1122],{"class":1077},[1071,1591,1582],{"class":1081},[1071,1593,1085],{"class":1077},[1071,1595,1596,1598,1601,1604,1606,1608,1611,1613],{"class":1073,"line":1278},[1071,1597,1579],{"class":1077},[1071,1599,1600],{"class":1094},"LazyMountainsList",[1071,1602,1603],{"class":1098}," v-if",[1071,1605,1102],{"class":1077},[1071,1607,1106],{"class":1105},[1071,1609,1610],{"class":1109},"show",[1071,1612,1106],{"class":1105},[1071,1614,1615],{"class":1077}," \u002F>\n",[1071,1617,1618,1620,1623,1625,1627,1629,1632,1634,1637,1639,1641,1644,1646,1648,1651,1653,1655],{"class":1073,"line":1284},[1071,1619,1579],{"class":1077},[1071,1621,1622],{"class":1081},"button",[1071,1624,1603],{"class":1098},[1071,1626,1102],{"class":1077},[1071,1628,1106],{"class":1105},[1071,1630,1631],{"class":1109},"!show",[1071,1633,1106],{"class":1105},[1071,1635,1636],{"class":1098}," @click",[1071,1638,1102],{"class":1077},[1071,1640,1106],{"class":1105},[1071,1642,1643],{"class":1109},"show = true",[1071,1645,1106],{"class":1105},[1071,1647,1115],{"class":1077},[1071,1649,1650],{"class":1118},"Show List",[1071,1652,1122],{"class":1077},[1071,1654,1622],{"class":1081},[1071,1656,1085],{"class":1077},[1071,1658,1659,1662,1664],{"class":1073,"line":1290},[1071,1660,1661],{"class":1077},"  \u003C\u002F",[1071,1663,1572],{"class":1081},[1071,1665,1085],{"class":1077},[1071,1667,1668,1670,1672],{"class":1073,"line":1296},[1071,1669,1122],{"class":1077},[1071,1671,1082],{"class":1081},[1071,1673,1085],{"class":1077},[1024,1675,1676,1677,1679],{},"通过使用 ",[1051,1678,1492],{}," 前缀，你可以将组件代码的加载推迟到合适的时机，这有助于优化你的 JavaScript 包体积。",[1310,1681,1683,1686,1689,1738,1741],{"title":1486,"to":1682},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents#dynamic-imports",[1043,1684,1685],{"id":1685},"延迟水合",[1024,1687,1688],{},"在首次加载时，并不总需要水合（或使可交互）你网站的所有组件。使用延迟水合，你可以控制组件何时加载其代码，从而改善应用的交互时间指标。Nuxt 允许你通过延迟水合控制组件何时变得可交互（在 Nuxt v3.16 中加入）。",[1063,1690,1692],{"className":1065,"code":1691,"language":1067,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-visible \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1051,1693,1694,1702,1710,1722,1730],{"__ignoreMap":354},[1071,1695,1696,1698,1700],{"class":1073,"line":1074},[1071,1697,1078],{"class":1077},[1071,1699,1082],{"class":1081},[1071,1701,1085],{"class":1077},[1071,1703,1704,1706,1708],{"class":1073,"line":1088},[1071,1705,1091],{"class":1077},[1071,1707,1572],{"class":1081},[1071,1709,1085],{"class":1077},[1071,1711,1712,1714,1717,1720],{"class":1073,"line":1129},[1071,1713,1579],{"class":1077},[1071,1715,1716],{"class":1094},"LazyMyComponent",[1071,1718,1719],{"class":1098}," hydrate-on-visible",[1071,1721,1615],{"class":1077},[1071,1723,1724,1726,1728],{"class":1073,"line":1138},[1071,1725,1661],{"class":1077},[1071,1727,1572],{"class":1081},[1071,1729,1085],{"class":1077},[1071,1731,1732,1734,1736],{"class":1073,"line":1145},[1071,1733,1122],{"class":1077},[1071,1735,1082],{"class":1081},[1071,1737,1085],{"class":1077},[1024,1739,1740],{},"为了优化你的应用，你可能希望将某些组件的水合推迟到它们可见时，或者推迟到浏览器完成更重要的任务之后。",[1310,1742,1744,1747,1760],{"title":1685,"to":1743},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents#delayed-or-lazy-hydration",[1043,1745,1746],{"id":1746},"获取数据",[1024,1748,1749,1750,1754,1755,1759],{},"为了避免重复获取同一份数据（一次在服务端、一次在客户端），Nuxt 提供了 ",[1028,1751,1752],{"href":452},[1051,1753,453],{}," 和 ",[1028,1756,1757],{"href":440},[1051,1758,441],{},"。它们确保如果 API 调用在服务端发起，数据会通过 payload 转发给客户端，而不是再次获取。",[1310,1761,1762,1766,1769,1772,1781,1790],{"title":42,"to":41},[1036,1763,1765],{"id":1764},"nuxt-核心模块","Nuxt 核心模块",[1024,1767,1768],{},"除了 Nuxt 的内置特性外，Nuxt 团队还维护着一些核心模块，可进一步帮助提升性能。这些模块帮助处理图片、自定义字体或第三方脚本等资源。",[1043,1770,1771],{"id":1771},"图片",[1024,1773,1774,1775,1780],{},"未经优化的图片会对你的网站性能产生显著的负面影响，尤其是 ",[1028,1776,1779],{"href":1777,"rel":1778},"https:\u002F\u002Fweb.dev\u002Farticles\u002Flcp",[1032],"Largest Contentful Paint (LCP)"," 分数。",[1024,1782,1783,1784,1789],{},"在 Nuxt 中，我们可以使用 ",[1028,1785,1788],{"href":1786,"rel":1787},"https:\u002F\u002Fimage.nuxt.com\u002F",[1032],"Nuxt Image"," 模块，它是为 Nuxt 应用提供的即插即用图片优化方案。它允许使用内置优化器或你喜欢的图片 CDN 来调整大小并转换你的图片。",[1791,1792,1795,1806,1846,1853,2076],"video-accordion",{"title":1793,"video-id":1794},"观看 LearnVue 关于 Nuxt Image 的视频","_UBff2eqGY0",[1024,1796,1797,1801,1802,1805],{},[1028,1798,1799],{"href":416},[1051,1800,417],{}," 是原生 ",[1051,1803,1804],{},"\u003Cimg>"," 标签的即插即用替代品，带来以下增强：",[1807,1808,1809,1813,1820,1830,1836],"ul",{},[1810,1811,1812],"li",{},"使用内置 provider 优化本地和远程图片",[1810,1814,1815,1816,1819],{},"使用 WebP 或 Avif 等现代格式将 ",[1051,1817,1818],{},"src"," 转换为 provider 优化过的 URL",[1810,1821,1822,1823,1754,1826,1829],{},"根据 ",[1051,1824,1825],{},"width",[1051,1827,1828],{},"height"," 自动调整图片尺寸",[1810,1831,1832,1833],{},"提供 sizes 选项时生成响应式 ",[1051,1834,1835],{},"sizes",[1810,1837,1838,1839,1842,1843,1845],{},"支持原生 ",[1051,1840,1841],{},"lazy loading"," 以及其他 ",[1051,1844,1804],{}," 属性",[1024,1847,1848,1849,1852],{},"你网站中的图片通常可以按重要性区分：那些需要在初始加载时尽快交付的（即 ",[1051,1850,1851],{},"Largest Contentful Paint","），以及那些可以稍后或在特定需要时加载的。为此，我们可以使用以下优化：",[1063,1854,1856],{"className":1065,"code":1855,"language":1067,"meta":354,"style":354},"\u003Ctemplate>\n  \u003C!-- 🚨 需要尽快加载 -->\n  \u003CNuxtImg\n    src=\"\u002Fhero-banner.jpg\"\n    format=\"webp\"\n    :preload=\"{ fetchPriority: 'high' }\"\n    loading=\"eager\"\n    width=\"200\"\n    height=\"100\"\n  \u002F>\n\n  \u003C!-- 🐌 可以稍后加载 -->\n  \u003CNuxtImg\n    src=\"\u002Ffacebook-logo.jpg\"\n    format=\"webp\"\n    loading=\"lazy\"\n    fetchpriority=\"low\"\n    width=\"200\"\n    height=\"100\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[1051,1857,1858,1866,1871,1878,1893,1907,1921,1935,1949,1963,1968,1972,1977,1983,1996,2008,2021,2036,2049,2062,2067],{"__ignoreMap":354},[1071,1859,1860,1862,1864],{"class":1073,"line":1074},[1071,1861,1078],{"class":1077},[1071,1863,1082],{"class":1081},[1071,1865,1085],{"class":1077},[1071,1867,1868],{"class":1073,"line":1088},[1071,1869,1870],{"class":1148},"  \u003C!-- 🚨 需要尽快加载 -->\n",[1071,1872,1873,1875],{"class":1073,"line":1129},[1071,1874,1091],{"class":1077},[1071,1876,1877],{"class":1094},"NuxtImg\n",[1071,1879,1880,1883,1885,1887,1890],{"class":1073,"line":1138},[1071,1881,1882],{"class":1098},"    src",[1071,1884,1102],{"class":1077},[1071,1886,1106],{"class":1105},[1071,1888,1889],{"class":1109},"\u002Fhero-banner.jpg",[1071,1891,1892],{"class":1105},"\"\n",[1071,1894,1895,1898,1900,1902,1905],{"class":1073,"line":1145},[1071,1896,1897],{"class":1098},"    format",[1071,1899,1102],{"class":1077},[1071,1901,1106],{"class":1105},[1071,1903,1904],{"class":1109},"webp",[1071,1906,1892],{"class":1105},[1071,1908,1909,1912,1914,1916,1919],{"class":1073,"line":1152},[1071,1910,1911],{"class":1098},"    :preload",[1071,1913,1102],{"class":1077},[1071,1915,1106],{"class":1105},[1071,1917,1918],{"class":1109},"{ fetchPriority: 'high' }",[1071,1920,1892],{"class":1105},[1071,1922,1923,1926,1928,1930,1933],{"class":1073,"line":1265},[1071,1924,1925],{"class":1098},"    loading",[1071,1927,1102],{"class":1077},[1071,1929,1106],{"class":1105},[1071,1931,1932],{"class":1109},"eager",[1071,1934,1892],{"class":1105},[1071,1936,1937,1940,1942,1944,1947],{"class":1073,"line":1278},[1071,1938,1939],{"class":1098},"    width",[1071,1941,1102],{"class":1077},[1071,1943,1106],{"class":1105},[1071,1945,1946],{"class":1109},"200",[1071,1948,1892],{"class":1105},[1071,1950,1951,1954,1956,1958,1961],{"class":1073,"line":1284},[1071,1952,1953],{"class":1098},"    height",[1071,1955,1102],{"class":1077},[1071,1957,1106],{"class":1105},[1071,1959,1960],{"class":1109},"100",[1071,1962,1892],{"class":1105},[1071,1964,1965],{"class":1073,"line":1290},[1071,1966,1967],{"class":1077},"  \u002F>\n",[1071,1969,1970],{"class":1073,"line":1296},[1071,1971,1142],{"emptyLinePlaceholder":1141},[1071,1973,1974],{"class":1073,"line":1302},[1071,1975,1976],{"class":1148},"  \u003C!-- 🐌 可以稍后加载 -->\n",[1071,1978,1979,1981],{"class":1073,"line":1451},[1071,1980,1091],{"class":1077},[1071,1982,1877],{"class":1094},[1071,1984,1985,1987,1989,1991,1994],{"class":1073,"line":1463},[1071,1986,1882],{"class":1098},[1071,1988,1102],{"class":1077},[1071,1990,1106],{"class":1105},[1071,1992,1993],{"class":1109},"\u002Ffacebook-logo.jpg",[1071,1995,1892],{"class":1105},[1071,1997,1998,2000,2002,2004,2006],{"class":1073,"line":1468},[1071,1999,1897],{"class":1098},[1071,2001,1102],{"class":1077},[1071,2003,1106],{"class":1105},[1071,2005,1904],{"class":1109},[1071,2007,1892],{"class":1105},[1071,2009,2010,2012,2014,2016,2019],{"class":1073,"line":1473},[1071,2011,1925],{"class":1098},[1071,2013,1102],{"class":1077},[1071,2015,1106],{"class":1105},[1071,2017,2018],{"class":1109},"lazy",[1071,2020,1892],{"class":1105},[1071,2022,2024,2027,2029,2031,2034],{"class":1073,"line":2023},17,[1071,2025,2026],{"class":1098},"    fetchpriority",[1071,2028,1102],{"class":1077},[1071,2030,1106],{"class":1105},[1071,2032,2033],{"class":1109},"low",[1071,2035,1892],{"class":1105},[1071,2037,2039,2041,2043,2045,2047],{"class":1073,"line":2038},18,[1071,2040,1939],{"class":1098},[1071,2042,1102],{"class":1077},[1071,2044,1106],{"class":1105},[1071,2046,1946],{"class":1109},[1071,2048,1892],{"class":1105},[1071,2050,2052,2054,2056,2058,2060],{"class":1073,"line":2051},19,[1071,2053,1953],{"class":1098},[1071,2055,1102],{"class":1077},[1071,2057,1106],{"class":1105},[1071,2059,1960],{"class":1109},[1071,2061,1892],{"class":1105},[1071,2063,2065],{"class":1073,"line":2064},20,[1071,2066,1967],{"class":1077},[1071,2068,2070,2072,2074],{"class":1073,"line":2069},21,[1071,2071,1122],{"class":1077},[1071,2073,1082],{"class":1081},[1071,2075,1085],{"class":1077},[1310,2077,2079,2082,2090,2099],{"title":1788,"to":2078},"https:\u002F\u002Fimage.nuxt.com\u002Fusage\u002Fnuxt-img",[1043,2080,2081],{"id":2081},"字体",[1024,2083,2084,2089],{},[1028,2085,2088],{"href":2086,"rel":2087},"https:\u002F\u002Ffonts.nuxt.com\u002F",[1032],"Nuxt Fonts"," 会自动优化你的字体（包括自定义字体），并移除外部网络请求，以提升隐私和性能。",[1024,2091,2092,2093,2098],{},"它包括对任何字体文件的内置自动自托管，这意味着你可以以最优方式加载 Web 字体，并借助底层包 ",[1028,2094,2097],{"href":2095,"rel":2096},"https:\u002F\u002Fgithub.com\u002Funjs\u002Ffontaine",[1032],"fontaine"," 减少布局偏移。",[1791,2100,2103,2106,2150,2153,2156,2165,2173],{"title":2101,"video-id":2102},"观看 Daniel Roe 关于 Nuxt Fonts 背后理念的演讲","D3F683UViBY",[1024,2104,2105],{},"Nuxt Fonts 会处理你所有的 CSS，并在遇到 font-family 声明时自动完成以下事情：",[2107,2108,2109,2116,2122,2132,2144],"ol",{},[1810,2110,2111,2115],{},[2112,2113,2114],"strong",{},"解析字体"," – 在 public\u002F 中查找字体文件，然后检查 Google、Bunny、Fontshare 等 Web 提供商。",[1810,2117,2118,2121],{},[2112,2119,2120],{},"生成 @font-face 规则"," – 注入 CSS 规则以从正确的来源加载字体。",[1810,2123,2124,2127,2128,2131],{},[2112,2125,2126],{},"代理并缓存字体"," – 将 URL 重写为 ",[1051,2129,2130],{},"\u002F_fonts","，下载并在本地缓存字体。",[1810,2133,2134,2137,2138,2143],{},[2112,2135,2136],{},"创建回退度量"," – 调整本地系统字体以匹配 Web 字体，减少布局偏移（",[1028,2139,2142],{"href":2140,"rel":2141},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fcls",[1032],"CLS","）。",[1810,2145,2146,2149],{},[2112,2147,2148],{},"将字体包含进构建"," – 将字体与你的项目打包在一起，对文件名进行哈希处理并设置长生命周期缓存头。",[1024,2151,2152],{},"它支持多个设计为可插拔、可扩展的 provider，因此无论你的设置如何，都应该能使用现有 provider 或编写自己的 provider。",[1043,2154,2155],{"id":2155},"脚本",[1024,2157,2158,2159,2164],{},"第三方资源（如分析工具、视频嵌入、地图和社交媒体集成）增强了网站功能，但会显著劣化用户体验，并对 ",[1028,2160,2163],{"href":2161,"rel":2162},"https:\u002F\u002Fweb.dev\u002Farticles\u002Finp",[1032],"Interaction to Next Paint (INP)"," 和 Largest Contentful Paint (LCP) 分数产生负面影响。",[1024,2166,2167,2172],{},[1028,2168,2171],{"href":2169,"rel":2170},"https:\u002F\u002Fscripts.nuxt.com\u002F",[1032],"Nuxt Scripts"," 让你以更好的性能、隐私、安全性和开发体验来加载第三方脚本。",[1791,2174,2177,2180,2343],{"title":2175,"video-id":2176},"观看 Alex Lichter 关于 Nuxt Scripts 的视频","sjMqUUvH9AE",[1024,2178,2179],{},"Nuxt Scripts 在第三方脚本之上提供了一个抽象层，提供 SSR 支持和类型安全，同时仍让你完全底层控制脚本的加载方式。",[1063,2181,2183],{"className":1186,"code":2182,"language":1188,"meta":354,"style":354},"const { onLoaded, proxy } = useScriptGoogleAnalytics(\n  {\n    id: 'G-1234567',\n    scriptOptions: {\n      trigger: 'manual',\n    },\n  },\n)\n\u002F\u002F 在 ga 加载时排队要发送的事件\nproxy.gtag('config', 'UA-123456789-1')\n\u002F\u002F 或等待 ga 加载完成\nonLoaded((gtag) => {\n  \u002F\u002F 脚本已加载\n})\n",[1051,2184,2185,2212,2217,2234,2243,2259,2263,2267,2271,2276,2307,2312,2332,2337],{"__ignoreMap":354},[1071,2186,2187,2189,2192,2195,2198,2201,2204,2206,2209],{"class":1073,"line":1074},[1071,2188,1527],{"class":1526},[1071,2190,2191],{"class":1077}," {",[1071,2193,2194],{"class":1530}," onLoaded",[1071,2196,2197],{"class":1077},",",[1071,2199,2200],{"class":1530}," proxy",[1071,2202,2203],{"class":1077}," }",[1071,2205,1535],{"class":1534},[1071,2207,2208],{"class":1202}," useScriptGoogleAnalytics",[1071,2210,2211],{"class":1118},"(\n",[1071,2213,2214],{"class":1073,"line":1088},[1071,2215,2216],{"class":1077},"  {\n",[1071,2218,2219,2222,2224,2227,2230,2232],{"class":1073,"line":1129},[1071,2220,2221],{"class":1214},"    id",[1071,2223,1218],{"class":1077},[1071,2225,2226],{"class":1105}," '",[1071,2228,2229],{"class":1109},"G-1234567",[1071,2231,1358],{"class":1105},[1071,2233,1262],{"class":1077},[1071,2235,2236,2239,2241],{"class":1073,"line":1138},[1071,2237,2238],{"class":1214},"    scriptOptions",[1071,2240,1218],{"class":1077},[1071,2242,1221],{"class":1077},[1071,2244,2245,2248,2250,2252,2255,2257],{"class":1073,"line":1145},[1071,2246,2247],{"class":1214},"      trigger",[1071,2249,1218],{"class":1077},[1071,2251,2226],{"class":1105},[1071,2253,2254],{"class":1109},"manual",[1071,2256,1358],{"class":1105},[1071,2258,1262],{"class":1077},[1071,2260,2261],{"class":1073,"line":1152},[1071,2262,1293],{"class":1077},[1071,2264,2265],{"class":1073,"line":1265},[1071,2266,1299],{"class":1077},[1071,2268,2269],{"class":1073,"line":1278},[1071,2270,1308],{"class":1118},[1071,2272,2273],{"class":1073,"line":1284},[1071,2274,2275],{"class":1148},"\u002F\u002F 在 ga 加载时排队要发送的事件\n",[1071,2277,2278,2281,2284,2287,2289,2291,2294,2296,2298,2300,2303,2305],{"class":1073,"line":1290},[1071,2279,2280],{"class":1118},"proxy",[1071,2282,2283],{"class":1077},".",[1071,2285,2286],{"class":1202},"gtag",[1071,2288,1206],{"class":1118},[1071,2290,1358],{"class":1105},[1071,2292,2293],{"class":1109},"config",[1071,2295,1358],{"class":1105},[1071,2297,2197],{"class":1077},[1071,2299,2226],{"class":1105},[1071,2301,2302],{"class":1109},"UA-123456789-1",[1071,2304,1358],{"class":1105},[1071,2306,1308],{"class":1118},[1071,2308,2309],{"class":1073,"line":1296},[1071,2310,2311],{"class":1148},"\u002F\u002F 或等待 ga 加载完成\n",[1071,2313,2314,2317,2319,2321,2324,2327,2330],{"class":1073,"line":1302},[1071,2315,2316],{"class":1202},"onLoaded",[1071,2318,1206],{"class":1118},[1071,2320,1206],{"class":1077},[1071,2322,2286],{"class":2323},"ssIVr",[1071,2325,2326],{"class":1077},")",[1071,2328,2329],{"class":1526}," =>",[1071,2331,1221],{"class":1077},[1071,2333,2334],{"class":1073,"line":1451},[1071,2335,2336],{"class":1148},"  \u002F\u002F 脚本已加载\n",[1071,2338,2339,2341],{"class":1073,"line":1463},[1071,2340,1305],{"class":1077},[1071,2342,1308],{"class":1118},[1310,2344,2346,2349,2352,2356,2374,2377,2380,2384,2391,2398,2401,2427,2431,2441,2455,2461,2467,2474,2479,2482,2486,2494,2497,2501,2509,2512,2515,2518,2521,2527,2533,2537,2542,2550,2554,2565,2581,2584,2589,2599,2602,2607,2612,2615,2618],{"title":2171,"to":2345},"https:\u002F\u002Fscripts.nuxt.com\u002Fscripts",[1036,2347,2348],{"id":2348},"性能分析工具",[1024,2350,2351],{},"要提升性能，我们首先需要知道如何衡量它，从在开发阶段（本地环境）衡量性能开始，然后转向审计部署在生产环境中的应用。",[1043,2353,2355],{"id":2354},"nuxi-analyze","Nuxi Analyze",[1024,2357,2358,2361,2362,2365,2366,2369,2370,2373],{},[1051,2359,2360],{},"nuxt"," 的 ",[1028,2363,2364],{"href":672},"这个"," 命令允许你分析 Nuxt 应用的生产包。它利用 ",[1051,2367,2368],{},"vite-bundle-visualizer","（类似于 ",[1051,2371,2372],{},"webpack-bundle-analyzer","）来生成应用包的视觉化表示，让你更容易识别哪些组件占据了最多空间。",[1024,2375,2376],{},"当你在可视化中看到一个大的色块时，往往意味着一个优化机会——无论是将其拆分为更小的部分、实现懒加载，还是用更高效的替代方案替换它，尤其是对第三方库而言。",[1024,2378,2379],{},"包含多个元素的大色块通常可以通过只导入必要的组件而非整个模块来减少，而大的独立色块可能更适合懒加载，而不是包含在主包中。",[1043,2381,2383],{"id":2382},"nuxt-devtools","Nuxt DevTools",[1024,2385,2386,2390],{},[1028,2387,2383],{"href":2388,"rel":2389},"https:\u002F\u002Fdevtools.nuxt.com\u002F",[1032]," 让你洞察并透明了解你的 Nuxt 应用，以识别性能差距并无缝管理应用配置。",[1024,2392,2393],{},[2394,2395],"img",{"alt":2396,"src":2397},"Nuxt DevTools 示例","https:\u002F\u002Fuser-images.githubusercontent.com\u002F11247099\u002F217670806-fb39aeff-3881-44e5-b9c8-6c757f5925fc.png",[1024,2399,2400],{},"它带有几个可用于衡量 Nuxt 应用性能的特性：",[2107,2402,2403,2409,2415,2421],{},[1810,2404,2405,2408],{},[2112,2406,2407],{},"时间线（Timeline）"," – 追踪渲染、更新和初始化组件所花费的时间，以识别性能瓶颈。",[1810,2410,2411,2414],{},[2112,2412,2413],{},"资源（Assets）"," – 显示文件大小（如图片）而不进行转换。",[1810,2416,2417,2420],{},[2112,2418,2419],{},"渲染树（Render Tree）"," – 展示 Vue 组件、脚本和样式之间的连接，以优化动态加载。",[1810,2422,2423,2426],{},[2112,2424,2425],{},"检查（Inspect）"," – 列出 Vue 应用中使用的所有文件及其大小与求值时间。",[1043,2428,2430],{"id":2429},"chrome-devtools","Chrome DevTools",[1024,2432,2433,2434,1754,2437,2440],{},"Chrome DevTools 带有两个用于衡量性能的有用标签页：",[1051,2435,2436],{},"Performance",[1051,2438,2439],{},"Lighthouse","。",[1024,2442,2443,2444,2448,2449,1754,2451,2454],{},"当你打开 ",[1028,2445,2436],{"href":2446,"rel":2447},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fperformance\u002Foverview",[1032]," 面板时，它会立即显示你本地的 ",[2112,2450,1779],{},[2112,2452,2453],{},"Cumulative Layout Shift (CLS)"," 分数（好、需改进或差）。",[1024,2456,2457,2458,2460],{},"如果你与页面交互，它还会捕获 ",[2112,2459,2163],{},"，根据设备和网络为你提供 Core Web Vitals 的完整视图。",[1024,2462,2463],{},[2394,2464],{"alt":2465,"src":2466},"Chrome DevTools 性能面板","https:\u002F\u002Fdeveloper.chrome.com\u002Fstatic\u002Fdocs\u002Fdevtools\u002Fperformance\u002Fimage\u002Fcpu-throttling_856.png",[1024,2468,2469,2473],{},[1028,2470,2439],{"href":2471,"rel":2472},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Flighthouse",[1032]," 会审计性能、无障碍、SEO、渐进式 Web 应用和最佳实践。它会对你的页面运行测试并生成报告。将未通过的审计作为改进你网站的指南。",[1024,2475,2476],{},[2394,2477],{"alt":2439,"src":2478},"https:\u002F\u002Fdeveloper.chrome.com\u002Fstatic\u002Fdocs\u002Flighthouse\u002Fimages\u002Flighthouse-overview_720.png",[1024,2480,2481],{},"每个审计都有一份参考文档，解释为什么该审计很重要，以及如何修复它。",[1043,2483,2485],{"id":2484},"pagespeed-insights","PageSpeed Insights",[1024,2487,2488,2493],{},[1028,2489,2492],{"href":2490,"rel":2491},"https:\u002F\u002Fdevelopers.google.com\u002Fspeed\u002Fdocs\u002Finsights\u002Fv5\u002Fabout",[1032],"PageSpeed Insights (PSI)"," 报告了页面在移动和桌面设备上的用户体验，并提供该页面如何改进的的建议。",[1024,2495,2496],{},"它提供了关于页面的实验室数据和现场数据。实验室数据对于调试问题很有用，因为它是在受控环境中收集的；而现场数据对于捕获真实、真实的用户体验很有用。",[1043,2498,2500],{"id":2499},"web-page-test","Web Page Test",[1024,2502,2503,2508],{},[1028,2504,2507],{"href":2505,"rel":2506},"https:\u002F\u002Fwww.webpagetest.org\u002F",[1032],"WebPageTest"," 是一个 Web 性能工具，提供关于页面在各种条件下表现如何的深度诊断信息。",[1024,2510,2511],{},"每个测试都可以从全球不同地点、在真实浏览器上、通过任意数量的自定义网络条件运行。",[1036,2513,2514],{"id":2514},"常见问题",[1024,2516,2517],{},"在构建更复杂的 Nuxt 应用时，你可能会遇到下面列出的一些问题。理解并修复这些问题将帮助你提升网站性能。",[1043,2519,2520],{"id":2520},"过度使用插件",[1024,2522,2523,2526],{},[2112,2524,2525],{},"问题","：大量插件会导致性能问题，尤其是当它们需要昂贵的计算或初始化时间过长时。由于插件在水合阶段运行，低效的设置会阻塞渲染并劣化用户体验。",[1024,2528,2529,2532],{},[2112,2530,2531],{},"解决方案","：检查你的插件，看看其中一些是否可以改为用组合式函数或工具函数来实现。",[1043,2534,2536],{"id":2535},"未使用的代码-依赖","未使用的代码 \u002F 依赖",[1024,2538,2539,2541],{},[2112,2540,2525],{},"：随着项目的发展，可能会出现一些未使用的代码或依赖。这些额外的功能可能未被使用或不需要，却会增加我们项目的包体积。",[1024,2543,2544,2546,2547,2549],{},[2112,2545,2531],{},"：检查你的 ",[1051,2548,178],{}," 中是否有未使用的依赖，并分析你的代码中是否有未使用的 utils\u002F组合式函数\u002F函数。",[1043,2551,2553],{"id":2552},"未使用-vue-性能提示","未使用 Vue 性能提示",[1024,2555,2556,2558,2559,2564],{},[2112,2557,2525],{},"：",[1028,2560,2563],{"href":2561,"rel":2562},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbest-practices\u002Fperformance",[1032],"Vue 文档"," 列出了我们可以在 Nuxt 项目中使用的若干性能改进，但由于它们属于 Vue 文档，开发者往往忘记它们，只关注 Nuxt 特定的改进——而 Nuxt 应用仍然是一个 Vue 项目。",[1024,2566,2567,2569,2570,2573,2574,2573,2577,2580],{},[2112,2568,2531],{},"：使用诸如 ",[1051,2571,2572],{},"shallowRef","、",[1051,2575,2576],{},"v-memo",[1051,2578,2579],{},"v-once"," 等概念来提升性能。",[1043,2582,2583],{"id":2583},"未遵循模式",[1024,2585,2586,2588],{},[2112,2587,2525],{},"：当前在项目中工作的人越多，维护稳定代码库就越困难。开发者倾向于引入他们在另一个项目中见过的新概念，这可能导致冲突和性能问题。",[1024,2590,2591,2593,2594,2440],{},[2112,2592,2531],{},"：在项目中建立规则和模式，例如 ",[1028,2595,2598],{"href":2596,"rel":2597},"https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fgood-practices-and-design-patterns-for-vue-composables-24lk",[1032],"Vue 组合式函数的良好实践与设计模式",[1043,2600,2601],{"id":2601},"试图同时加载所有内容",[1024,2603,2604,2606],{},[2112,2605,2525],{},"：当一个页面被加载，却没有被正确告知元素的加载顺序时，会导致同时获取所有内容——这可能很慢并导致糟糕的用户体验。",[1024,2608,2609,2611],{},[2112,2610,2531],{},"：使用渐进增强（Progressive Enhancement）之类的概念，先设置核心网页内容，然后随着浏览器\u002F互联网连接允许，再叠加更细致、技术上更严谨的呈现和特性层。",[1036,2613,2614],{"id":2614},"有用资源",[1024,2616,2617],{},"要了解更多关于提升性能的各种技术，请查看以下资源：",[2107,2619,2620,2627,2634],{},[1810,2621,2622],{},[1028,2623,2626],{"href":2624,"rel":2625},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fapply-instant-loading-with-prpl",[1032],"使用 PRPL 模式应用即时加载",[1810,2628,2629],{},[1028,2630,2633],{"href":2631,"rel":2632},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FLearn_web_development\u002FExtensions\u002FPerformance\u002FPerceived_performance",[1032],"感知性能",[1810,2635,2636],{},[1028,2637,2640],{"href":2638,"rel":2639},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FPerformance\u002FGuides\u002FCritical_rendering_path",[1032],"理解关键渲染路径",[2642,2643,2644],"style",{},"html pre.shiki code .sF54B, html code.shiki .sF54B{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s6g6u, html code.shiki .s6g6u{--shiki-light:#E53935;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .se1bN, html code.shiki .se1bN{--shiki-light:#E53935;--shiki-light-font-style:inherit;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#F07178;--shiki-dark-font-style:inherit}html pre.shiki code .sXjFp, html code.shiki .sXjFp{--shiki-light:#9C3EDA;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .s0jeK, html code.shiki .s0jeK{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .s-Aze, html code.shiki .s-Aze{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .smVNa, html code.shiki .smVNa{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sZqJ9, html code.shiki .sZqJ9{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szyBz, html code.shiki .szyBz{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .srJn9, html code.shiki .srJn9{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sOtFm, html code.shiki .sOtFm{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .si1Qm, html code.shiki .si1Qm{--shiki-light:#FF5370;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}html pre.shiki code .sSD0A, html code.shiki .sSD0A{--shiki-light:#E53935;--shiki-default:#9ECBFF;--shiki-dark:#F07178}html pre.shiki code .sOUxV, html code.shiki .sOUxV{--shiki-light:#F76D47;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}html pre.shiki code .sV7Px, html code.shiki .sV7Px{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sJTDI, html code.shiki .sJTDI{--shiki-light:#90A4AE;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sXPRQ, html code.shiki .sXPRQ{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .ssIVr, html code.shiki .ssIVr{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#FFAB70;--shiki-default-font-style:inherit;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":354,"searchDepth":1129,"depth":1129,"links":2646},[2647],{"id":1038,"depth":1088,"text":1038,"children":2648},[2649,2650,2651],{"id":1045,"depth":1129,"text":1045},{"id":1314,"depth":1129,"text":1314},{"id":1486,"depth":1129,"text":1486},"md",{},"[object Object]",{"title":238,"description":239},"docs\u002F3.guide\u002F2.best-practices\u002Fperformance","MdSqXopXeM4GNcAezHAriZxCgpVSIkAinLegt5niT8Q",1785179848289]