SSR中beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted及onMounted、onUpdated仅客户端执行；created、beforeCreate、setup服务端可执行但需避免浏览器API；onServerPrefetch（Vue2）或useAsyncData（Nuxt3）专用于服务端数据预取。

Vue生命周期钩子在SSR环境下不能全用，关键要分清哪些只在客户端跑、哪些服务端也能执行，否则容易报错或导致 hydration 失败。

哪些钩子服务端根本不会触发

以下钩子在 SSR 渲染阶段（renderToString 或 renderToNodeStream）完全不执行，因为它们依赖浏览器环境：

• beforeMount / mounted：需要真实 DOM 挂载，服务端只有 HTML 字符串
• beforeUpdate / updated：基于响应式更新 + DOM 重绘，服务端无更新机制
• beforeUnmount / unmounted：卸载是客户端运行时行为，服务端没有“卸载”概念
• onMounted / onUpdated（组合式 API）：同理，只在客户端 hydration 后调用

哪些钩子服务端能用但得小心

这些钩子在 SSR 和客户端都会执行，但逻辑必须跨平台兼容：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• created / beforeCreate：服务端会运行，适合初始化数据，但不能访问 window、document、localStorage 等浏览器 API
• setup()：组合式 API 入口，服务端必执行；所有副作用代码（如 API 调用）需加环境判断
• onServerPrefetch（Vue 2）或 useAsyncData（Nuxt 3）：这是唯一专为 SSR 设计的钩子，只在服务端执行，返回 Promise，Vue 会等它完成再渲染

数据获取该放在哪儿

首屏数据必须在服务端拿到，避免客户端白屏或闪烁：

• 推荐用 onServerPrefetch（Vue 2）或 useAsyncData / definePageMeta + asyncData（Nuxt 3），框架已封装好环境适配
• 若手动在 created 或 setup 中请求数据，务必判断环境：if (typeof window === 'undefined') 或 process.server（Nuxt）
• 避免在 mounted 中拉首屏数据——这等于放弃 SSR 的核心优势
• 慎用 Date.now()、Math.random()、本地时间等非确定性值，否则服务端/客户端渲染结果不一致，触发 hydration 警告

常见坑与规避建议

很多 SSR 问题其实源于生命周期误用：

• 在 created 里直接读 navigator.userAgent → 服务端报 ReferenceError
• 在 setup 里没判断就调 localStorage.setItem → SSR 崩溃
• 异步数据没预置到 store，客户端 hydration 后视图突然跳变 → 应确保服务端已把数据注入初始状态
• 滥用 $nextTick：它在服务端无效，也不参与 SSR 渲染流程，仅用于客户端 DOM 更新后回调

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！