了解 Nuxt 应用的生命周期，是写出高性能、无 bug 全栈应用的关键——它能帮你明确“代码在哪里执行”“数据如何流转”“错误如何捕获”。本文基于 Nuxt 4（最新稳定版），结合实际项目案例，详细拆解服务器端与客户端的每一步逻辑，帮你从“知其然”到“知其所以然”。

一、服务器端生命周期：处理初始请求的核心流程

服务器端生命周期针对每个初始请求（如用户输入 URL 或刷新页面）执行，核心目标是生成可直接渲染的 HTML（SSR 模式）或静态页面（SSG 模式）。以下是详细步骤：

1. 步骤 1：初始化 Nitro 服务器与插件（仅执行一次）

Nuxt 4 的底层服务器引擎是 Nitro 2——它不是传统的 Express/Koa，而是一个跨平台、高性能的无服务器引擎，支持 Vercel、Cloudflare、Docker 等部署目标，冷启动速度比传统服务器快 50% 以上。(官方这个说 )

关键细节

Nitro 启动时，会先执行 server/plugins/ 目录下的Nitro 插件（仅服务器端运行）。这些插件用于处理应用级逻辑，比如错误捕获、资源清理、全局配置。
无服务器环境（如 Vercel）中，服务器会为每个请求启动，但 Nitro 插件仍仅执行一次（Nitro 会缓存插件状态）。

实际项目示例：Nitro 错误处理插件

假设你需要统一捕获服务器端的所有错误，并记录到日志系统（如 Sentry），可以写一个 Nitro 插件：

// server/plugins/errorHandler.ts
import { defineNitroPlugin } from 'nitropack'
import * as Sentry from '@sentry/node'

export default defineNitroPlugin((nitroApp) => {
  // 初始化 Sentry
  Sentry.init({ dsn: process.env.SENTRY_DSN })

  // 捕获 Nitro 的错误事件
  nitroApp.hooks.hook('error', (err, event) => {
    console.error('Server Error:', err)
    Sentry.captureException(err, {
      extra: {
        url: event.node.req.url,
        method: event.node.req.method,
      },
    })
  })

  // 捕获 Nitro 关闭事件（清理资源）
  nitroApp.hooks.hook('close', () => {
    console.log('Nitro server closed')
    Sentry.close() // 关闭 Sentry 连接
  })
})

2. 步骤 2：执行 Nitro 服务器中间件（每个请求一次）

Nitro 中间件位于 server/middleware/ 目录，用于处理每个请求的前置逻辑（如身份验证、日志记录、请求转换）。

实际项目示例：JWT 身份验证中间件

假设你的应用需要验证用户的 JWT 令牌（存放在 Cookie 中），可以写一个中间件：

// server/middleware/auth.ts
import { defineEventHandler, getCookie, createError } from 'h3'
import { verify } from 'jsonwebtoken'

export default defineEventHandler(async (event) => {
  const token = getCookie(event, 'auth_token')
  if (!token) {
    throw createError({ statusCode: 401, statusMessage: '未登录' })
  }

  try {
    // 验证 JWT 令牌（密钥从环境变量获取）
    const payload = verify(token, process.env.JWT_SECRET!)
    // 将用户信息存入请求上下文，后续逻辑可直接使用
    event.context.user = payload
  } catch (err) {
    throw createError({ statusCode: 401, statusMessage: '令牌无效' })
  }
})

3. 步骤 3：初始化 Nuxt 并执行应用插件

这一步会创建 Vue 实例和 Nuxt 实例，然后执行Nuxt 应用插件（分为内置插件和自定义插件）：

内置插件：Vue Router、unhead（管理页面元数据）、Pinia（状态管理）等；
自定义插件：app/plugins/ 目录下的插件，包括：
- 无后缀（如 logger.ts）：同时运行在服务器和客户端；
- .server 后缀（如 logger.server.ts）：仅服务器端运行。

插件执行顺序（重要）：

内置插件（按 Nuxt 预设顺序）；
自定义 .server 插件；
无后缀自定义插件。

实际项目示例：服务器端日志插件

假设你需要记录服务器端的请求信息，可以写一个 .server 插件：

// app/plugins/logger.server.ts
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  // 监听 Nuxt 的 `app:created` 钩子（插件初始化完成后触发）
  nuxtApp.hooks.hook('app:created', () => {
    console.log('Nuxt 服务器端应用创建完成')
  })

  // 记录每个请求的 URL 和方法
  nuxtApp.hooks.hook('request', (event) => {
    const req = event.node.req
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
  })
})

4. 步骤 4：路由验证（每个请求一次）

路由验证是指在导航到页面之前，检查动态路由参数的有效性（如文章 ID、用户 ID 是否存在）。验证逻辑定义在页面组件的 definePageMeta 中。

实际项目示例：验证文章 ID 的有效性

假设你有一个动态路由 pages/articles/[id].vue，需要验证 id 是否存在于数据库（用 Prisma ORM）：

vue

&lt;!-- pages/articles/[id].vue -->
&lt;template>
  &lt;div v-if="article">
    &lt;h1>&#123;&#123; article.title &#125;&#125;&lt;/h1>
    &lt;p>&#123;&#123; article.content &#125;&#125;&lt;/p>
  &lt;/div>
  &lt;div v-else>文章不存在&lt;/div>
&lt;/template>

&lt;script setup lang="ts">
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

// 定义页面元数据（路由验证）
definePageMeta({
  // 验证动态路由参数 `id`
  validate: async (route) => {
    const id = Number(route.params.id)
    if (isNaN(id)) {
      // 参数无效，返回 400 错误
      return { statusCode: 400, statusMessage: '无效的文章ID' }
    }

    // 检查文章是否存在于数据库
    const article = await prisma.article.findUnique({ where: { id } })
    if (!article) {
      // 文章不存在，返回 404 错误
      return { statusCode: 404, statusMessage: '文章未找到' }
    }

    // 参数有效，继续导航
    return true
  },
})

// 获取文章数据（SSR 期间执行）
const route = useRoute()
const { data: article } = await useAsyncData('article', async () => {
  return prisma.article.findUnique({ where: { id: Number(route.params.id) } })
})
&lt;/script>

5. 步骤 5：执行 Nuxt 应用中间件（每个请求一次）

Nuxt 应用中间件位于 app/middleware/ 目录，用于处理路由导航的前置逻辑（如权限校验、重定向）。与 Nitro 中间件的区别是：

Nitro 中间件是服务器级的（处理所有请求）；
Nuxt 应用中间件是路由级的（仅处理页面导航）。

中间件类型：

全局中间件：文件名以 global. 开头（如 global.auth.ts），所有路由都会执行；
命名中间件：文件名无特殊前缀（如 auth.ts），需在页面 definePageMeta 中指定；
匿名中间件：直接定义在页面组件中（不推荐，维护性差）。

实际项目示例：全局权限校验中间件

假设你需要限制某些页面只能由管理员访问，可以写一个全局中间件：

// app/middleware/global.auth.ts
import { defineNuxtRouteMiddleware, navigateTo } from '#app'

export default defineNuxtRouteMiddleware((to) => {
  const user = useUserStore().user // 从 Pinia 获取用户信息

  // 需要管理员权限的页面（路径包含 /admin）
  if (to.path.startsWith('/admin') && !user?.isAdmin) {
    // 未登录或非管理员，重定向到登录页
    return navigateTo('/login')
  }
})

6. 步骤 6：渲染页面与组件（SSR 核心步骤）

这一步是服务器端渲染的核心：Nuxt 会自上而下渲染页面组件，并执行 useFetch/useAsyncData 等可组合式函数获取数据（仅服务器端执行）。

关键注意事项：

SSR 期间，Vue 的生命周期钩子（如 onMounted、onBeforeMount）不会执行（因为服务器端没有 DOM）；
避免在 <script setup> 的根范围写副作用代码（如 setInterval、修改 DOM），否则会导致服务器端内存泄漏或客户端 hydration 错误。

实际项目示例：SSR 中获取文章列表

假设你需要在首页渲染文章列表，用 useAsyncData 获取数据（支持 SSR）：

vue

&lt;!-- pages/index.vue -->
&lt;template>
  &lt;div class="article-list">
    &lt;div
      v-for="article in articles"
      :key="article.id"
      class="article-item"
    >
      &lt;h2>&#123;&#123; article.title &#125;&#125;&lt;/h2>
      &lt;p>&#123;&#123; article.excerpt &#125;&#125;&lt;/p>
    &lt;/div>
  &lt;/div>
&lt;/template>

&lt;script setup lang="ts">
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

// 服务器端获取文章列表（SSR）
const { data: articles } = await useAsyncData('articles', async () => {
  return prisma.article.findMany({
    select: { id: true, title: true, excerpt: true }, // 只选需要的字段（优化性能）
    orderBy: { createdAt: 'desc' },
  })
})
&lt;/script>

7. 步骤 7：生成 HTML 并发送给客户端

渲染完成后，Nuxt 会将组件转换为 HTML 字符串，并结合 unhead 生成的元数据（如 <title>、<meta>）生成完整的 HTML 文档。

关键钩子：

app:rendered：页面渲染完成后触发（可用于清理资源）；
render:html：生成 HTML 后、发送给客户端前触发（可修改 HTML 内容）。

实际项目示例：注入统计脚本

假设你需要在页面中注入 Google Analytics 脚本，可以用 render:html 钩子：

// server/plugins/ga.ts
import { defineNitroPlugin } from 'nitropack'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (htmlContext) => {
    // 在 &lt;/body> 前注入 GA 脚本
    htmlContext.bodyAppend.push(`
      &lt;script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX">&lt;/script>
      &lt;script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXX');
      &lt;/script>
    `)
  })
})

二、客户端生命周期：从 HTML 到交互（浏览器端）

无论你使用 SSR、SSG 还是 SPA 模式，客户端生命周期都完全在浏览器中执行，核心目标是将静态 HTML 转换为可交互的 Vue 应用。

1. 步骤 1：初始化 Nuxt 与应用插件（仅执行一次）

与服务器端类似，客户端会初始化 Nuxt 实例并执行插件：

内置插件：Vue Router、Pinia 等；
自定义插件：app/plugins/ 目录下的插件，包括：
- 无后缀（如 logger.ts）：同时运行在服务器和客户端；
- .client 后缀（如 logger.client.ts）：仅客户端运行。

实际项目示例：客户端日志插件

假设你需要记录客户端的页面加载时间，可以写一个 .client 插件：

// app/plugins/logger.client.ts
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks.hook('app:created', () => {
    const loadTime =
      performance.now() - window.performance.timing.navigationStart
    console.log(`客户端应用加载时间：${loadTime.toFixed(2)}ms`)
  })
})

2. 步骤 2：路由验证（每个导航一次）

与服务器端逻辑一致，但客户端的路由验证可以处理浏览器端特有的场景（如重定向到登录页）。

3. 步骤 3：执行 Nuxt 应用中间件（每个导航一次）

客户端中间件与服务器端类似，但可以使用客户端特有的 API（如 window、document）。

实际项目示例：客户端登录状态检查

假设你需要在客户端检查用户是否登录，未登录则重定向到登录页：

// app/middleware/auth.client.ts
import { defineNuxtRouteMiddleware, navigateTo } from '#app'

export default defineNuxtRouteMiddleware((to) => {
  const user = useUserStore().user

  // 需要登录的页面（路径包含 /profile）
  if (to.path.startsWith('/profile') && !user) {
    return navigateTo('/login')
  }
})

4. 步骤 4：安装 Vue 与 Hydration（核心交互步骤）

Hydration（水化）是指将服务器端渲染的静态 HTML 转换为可交互的 Vue 应用。Nuxt 会执行以下操作：

调用 app.mount('#__nuxt')：将 Vue 实例挂载到页面的 #__nuxt 容器；
匹配组件与 DOM 节点：Vue 会将服务器端渲染的组件与浏览器中的 DOM 节点一一对应；
绑定事件监听：为按钮、输入框等元素添加 click、input 等事件。

关键注意事项：

数据一致性：服务器端获取的数据（如 useAsyncData）必须与客户端一致，否则会导致 hydration 错误（如页面闪烁、内容不一致）；
避免客户端副作用：在 onMounted 中执行客户端特有的逻辑（如初始化图表、加载第三方 SDK）。

实际项目示例：Hydration 注意事项

假设你用 useAsyncData 获取文章数据，服务器端和客户端必须使用相同的查询条件：

vue

&lt;!-- pages/articles/[id].vue -->
&lt;script setup lang="ts">
const route = useRoute()
const { data: article } = await useAsyncData('article', async () => {
  // 服务器端和客户端都执行此逻辑，确保数据一致
  return $fetch(`/api/articles/${route.params.id}`)
})
&lt;/script>

5. 步骤 5：Vue 生命周期（客户端特有）

客户端会执行完整的 Vue 生命周期钩子，你可以在这些钩子中处理客户端特有的逻辑（如 DOM 操作、第三方库初始化）。

实际项目示例：客户端初始化 ECharts 图表

假设你需要在文章详情页展示一个阅读量趋势图表，可以在 onMounted 中初始化 ECharts：

vue

&lt;!-- pages/articles/[id].vue -->
&lt;template>
  &lt;div
    id="chart"
    style="width: 100%; height: 300px;"
  >&lt;/div>
&lt;/template>

&lt;script setup lang="ts">
import * as echarts from 'echarts'

onMounted(() => {
  const chartDom = document.getElementById('chart')
  const myChart = echarts.init(chartDom)

  // 模拟阅读量数据（实际从 API 获取）
  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [120, 200, 150, 80, 70] }],
  }

  myChart.setOption(option)
})
&lt;/script>

三、总结：Nuxt 生命周期的核心原则与最佳实践

1. 补全：哪些代码在“对应环境”执行？

通过前面的拆解，我们可以用一句话总结 Nuxt 的环境隔离规则：

服务器端独有的代码：.server 后缀的插件（如 logger.server.ts）、Nitro 中间件（server/middleware/）、useAsyncData 的服务器端数据请求、import.meta.server 条件代码；
客户端独有的代码：.client 后缀的插件（如 logger.client.ts）、onMounted/onUnmounted 等 Vue 客户端钩子、客户端中间件（如 auth.client.ts）、import.meta.client 条件代码（如 if (import.meta.client) { /* 仅客户端执行 */ }）；
跨环境共享的代码：无后缀的插件（如 logger.ts）、useRoute/useStore 等 Nuxt 内置可组合式函数、definePageMeta 路由元数据。

2. 生命周期的“黄金法则”：避免 90% 的坑

Nuxt 的生命周期设计遵循“约定大于配置”，但新手常踩的坑往往来自“环境混淆”或“数据不一致”。以下是 4 条必须遵守的原则：

法则 1：用 `useAsyncData`/`useFetch` 确保“数据一致”

问题场景：服务器端用 fetch 获取数据，客户端重新加载页面时，数据会重复请求，导致页面闪烁或 Hydration 错误。 解决方法：用 Nuxt 提供的 useAsyncData 或 useFetch（二者都是 SSR 友好的），它们会自动同步服务器端和客户端的数据：

vue

&lt;script setup lang="ts">
// 正确：用 useAsyncData 获取数据，SSR 和客户端共享结果
const { data: articles } = await useAsyncData('articles', () => {
  return $fetch('/api/articles') // $fetch 是 Nuxt 内置的 SSR 友好请求工具
})

// 错误：直接用 fetch，客户端会重复请求
// const articles = await fetch('/api/articles').then(res => res.json());
&lt;/script>

法则 2：用“后缀”隔离环境，别写“通用但易错”的代码

问题场景：在服务器端插件中使用 window 对象，导致服务器崩溃（window is not defined）。 解决方法：用 .server/.client 后缀明确代码的运行环境：

// 正确：.server 后缀的插件，仅服务器端执行
// app/plugins/logger.server.ts
export default defineNuxtPlugin(() => {
  console.log('服务器端插件执行')
})

// 正确：.client 后缀的插件，仅客户端执行
// app/plugins/logger.client.ts
export default defineNuxtPlugin(() => {
  console.log('客户端插件执行，window:', window)
})

法则 3：服务器端别碰“客户端特有的东西”

禁止操作：在服务器端执行 DOM 操作（如 document.querySelector）、使用 window/localStorage、调用浏览器 API（如 navigator.geolocation）。 替代方案：把这些逻辑放到 onMounted 钩子（仅客户端执行）：

vue

&lt;template>
  &lt;div id="map">&lt;/div>
&lt;/template>

&lt;script setup lang="ts">
onMounted(() => {
  // 客户端初始化地图（服务器端无 DOM，不会执行）
  const map = new BMapGL.Map('map')
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11)
})
&lt;/script>

法则 4：用“分层逻辑”处理不同级别的任务

Nuxt 的生命周期设计了分层处理逻辑，不要把所有代码堆在一个地方：

全局任务（如错误捕获、日志）：用 Nitro 插件（server/plugins/）；
路由级任务（如权限校验、重定向）：用 Nuxt 应用中间件（app/middleware/）；
页面级任务（如动态路由验证、数据获取）：用页面组件的 definePageMeta 和 useAsyncData；
客户端交互任务（如 DOM 操作、图表初始化）：用 onMounted 钩子。

3. 常见问题解答：你可能遇到的“坑”

Q1：为什么服务器端的 `console.log` 不显示在浏览器控制台？

A：服务器端的代码运行在 Node.js 环境，日志会输出到服务器终端（如 Vercel 的函数日志、本地开发的终端），不会传递到浏览器。如果要在浏览器看日志，用客户端的 console.log（如 .client 插件或 onMounted 钩子）。

Q2：如何避免“Hydration 错误”（如“Mismatch between server-rendered and client-rendered content”）？

A：Hydration 错误的核心原因是服务器端渲染的 HTML 与客户端初始化的 Vue 应用结构不一致。解决方法：

确保服务器端和客户端的数据一致（用 useAsyncData）；
避免在服务器端修改 DOM（如用 v-if 条件渲染时，服务器端和客户端的条件要一致）；

用 client-only 组件包裹客户端特有的内容（如广告、地图）：

vue

&lt;template>
  &lt;client-only>
    &lt;!-- 仅客户端渲染，避免 Hydration 错误 -->
    &lt;AdComponent />
  &lt;/client-only>
&lt;/template>

Q3：为什么 `onMounted` 里的代码在 SSR 模式下不执行？

A：onMounted 是 Vue 的客户端生命周期钩子，仅在浏览器中执行（服务器端没有 DOM，无法挂载组件）。如果需要在服务器端执行初始化逻辑，用 app:created 钩子（Nuxt 内置的应用级钩子）。

四、最后：生命周期是“工具”，不是“束缚”

Nuxt 的生命周期设计的核心目标是让开发者更专注于业务，而非环境差异。理解它的意义不是“记住每一步的顺序”，而是“知道代码该写在哪里”“如何避免错误”“如何优化性能”。

举个例子：

要做全局错误监控？写 Nitro 插件；
要做路由权限校验？写 Nuxt 中间件；
要做客户端 DOM 操作？写 onMounted 钩子；
要做数据同步？写 useAsyncData。

当你能熟练运用这些“约定”，Nuxt 的生命周期会从“复杂的流程”变成“好用的工具”——帮你快速构建高性能、可维护的全栈应用。

写在最后：Nuxt 4 的生命周期是“进化的”，但核心逻辑不会变——用 Vue 写全栈应用，让环境差异不再是负担。如果你在实践中遇到问题，不妨回到生命周期图，问自己：“这段代码应该在哪个环境执行？”“数据是从哪里来的？”答案往往就在其中。

希望这篇文章能帮你“看透”Nuxt 的生命周期，写出更稳定、更高效的代码！

docs

vue-bus

构建项目

assets

components

middleware

static

store

sell

docs

vue-sell-app

01instance

一、服务器端生命周期：处理初始请求的核心流程 ​

1. 步骤 1：初始化 Nitro 服务器与插件（仅执行一次） ​

关键细节 ​

实际项目示例：Nitro 错误处理插件 ​

2. 步骤 2：执行 Nitro 服务器中间件（每个请求一次） ​

实际项目示例：JWT 身份验证中间件 ​

3. 步骤 3：初始化 Nuxt 并执行应用插件 ​

插件执行顺序（重要）： ​

实际项目示例：服务器端日志插件 ​

4. 步骤 4：路由验证（每个请求一次） ​

实际项目示例：验证文章 ID 的有效性 ​

5. 步骤 5：执行 Nuxt 应用中间件（每个请求一次） ​

中间件类型： ​

实际项目示例：全局权限校验中间件 ​

6. 步骤 6：渲染页面与组件（SSR 核心步骤） ​

关键注意事项： ​

实际项目示例：SSR 中获取文章列表 ​

7. 步骤 7：生成 HTML 并发送给客户端 ​

关键钩子： ​

实际项目示例：注入统计脚本 ​

二、客户端生命周期：从 HTML 到交互（浏览器端） ​

1. 步骤 1：初始化 Nuxt 与应用插件（仅执行一次） ​

实际项目示例：客户端日志插件 ​

2. 步骤 2：路由验证（每个导航一次） ​

3. 步骤 3：执行 Nuxt 应用中间件（每个导航一次） ​

实际项目示例：客户端登录状态检查 ​

4. 步骤 4：安装 Vue 与 Hydration（核心交互步骤） ​

关键注意事项： ​

实际项目示例：Hydration 注意事项 ​

5. 步骤 5：Vue 生命周期（客户端特有） ​

实际项目示例：客户端初始化 ECharts 图表 ​

三、总结：Nuxt 生命周期的核心原则与最佳实践 ​

1. 补全：哪些代码在“对应环境”执行？ ​

2. 生命周期的“黄金法则”：避免 90% 的坑 ​

法则 1：用 useAsyncData/useFetch 确保“数据一致” ​

法则 2：用“后缀”隔离环境，别写“通用但易错”的代码 ​

法则 3：服务器端别碰“客户端特有的东西” ​

法则 4：用“分层逻辑”处理不同级别的任务 ​

3. 常见问题解答：你可能遇到的“坑” ​

Q1：为什么服务器端的 console.log 不显示在浏览器控制台？ ​

Q2：如何避免“Hydration 错误”（如“Mismatch between server-rendered and client-rendered content”）？ ​

Q3：为什么 onMounted 里的代码在 SSR 模式下不执行？ ​

四、最后：生命周期是“工具”，不是“束缚” ​

一、服务器端生命周期：处理初始请求的核心流程

1. 步骤 1：初始化 Nitro 服务器与插件（仅执行一次）

关键细节

实际项目示例：Nitro 错误处理插件

2. 步骤 2：执行 Nitro 服务器中间件（每个请求一次）

实际项目示例：JWT 身份验证中间件

3. 步骤 3：初始化 Nuxt 并执行应用插件

插件执行顺序（重要）：

实际项目示例：服务器端日志插件

4. 步骤 4：路由验证（每个请求一次）

实际项目示例：验证文章 ID 的有效性

5. 步骤 5：执行 Nuxt 应用中间件（每个请求一次）

中间件类型：

实际项目示例：全局权限校验中间件

6. 步骤 6：渲染页面与组件（SSR 核心步骤）

关键注意事项：

实际项目示例：SSR 中获取文章列表

7. 步骤 7：生成 HTML 并发送给客户端

关键钩子：

实际项目示例：注入统计脚本

二、客户端生命周期：从 HTML 到交互（浏览器端）

1. 步骤 1：初始化 Nuxt 与应用插件（仅执行一次）

实际项目示例：客户端日志插件

2. 步骤 2：路由验证（每个导航一次）

3. 步骤 3：执行 Nuxt 应用中间件（每个导航一次）

实际项目示例：客户端登录状态检查

4. 步骤 4：安装 Vue 与 Hydration（核心交互步骤）

关键注意事项：

实际项目示例：Hydration 注意事项

5. 步骤 5：Vue 生命周期（客户端特有）

实际项目示例：客户端初始化 ECharts 图表

三、总结：Nuxt 生命周期的核心原则与最佳实践

1. 补全：哪些代码在“对应环境”执行？

2. 生命周期的“黄金法则”：避免 90% 的坑

法则 1：用 `useAsyncData`/`useFetch` 确保“数据一致”

法则 2：用“后缀”隔离环境，别写“通用但易错”的代码

法则 3：服务器端别碰“客户端特有的东西”

法则 4：用“分层逻辑”处理不同级别的任务

3. 常见问题解答：你可能遇到的“坑”

Q1：为什么服务器端的 `console.log` 不显示在浏览器控制台？

Q2：如何避免“Hydration 错误”（如“Mismatch between server-rendered and client-rendered content”）？

Q3：为什么 `onMounted` 里的代码在 SSR 模式下不执行？

四、最后：生命周期是“工具”，不是“束缚”