vue.js ssr中仅created等钩子服务端可执行，beforemount、mounted等仅客户端可用；数据获取应放在created或setup中并判断环境，避免hydration不一致。
Vue.js 的生命周期钩子在服务端渲染（SSR）中并非全部可用，关键在于区分“仅客户端执行”和“服务端与客户端共用”的钩子。服务端没有 DOM、浏览器 API 和用户交互上下文，因此部分钩子无法触发或行为异常。
仅客户端执行的钩子（SSR 中不执行）
以下钩子在纯 SSR 渲染阶段（即 renderToString 或 renderToNodeStream 过程中）完全不会被调用：
- beforeMount —— 依赖挂载前的 DOM 准备，服务端无 DOM 实例
- mounted —— 明确要求真实 DOM 已存在，SSR 阶段只生成字符串，不挂载
- beforeUpdate / updated —— 基于响应式数据变更 + DOM 重渲染，服务端无更新机制
- beforeUnmount / unmounted —— 组件卸载是客户端运行时行为，服务端无生命周期终止概念
服务端与客户端均可执行的钩子（需谨慎使用）
以下钩子在 SSR 和客户端 hydrate 阶段都可能执行，但逻辑必须兼容两端环境：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
setup()（组合式 API 入口）—— 执行于组件初始化，服务端会运行，但不可访问
window、document等浏览器全局对象 -
onBeforeMount / onMounted（组合式 API 对应钩子）—— 在客户端 hydrate 后才触发，服务端不执行；但若写在
setup()内部且未做平台判断，容易误触发报错 -
created / onCreated —— 是 SSR 安全的钩子，常用于数据预取（如
asyncData或fetch），但注意：不能直接操作 DOM 或依赖浏览器 API
SSR 推荐的数据获取时机
为保障首屏数据一致性，应将异步数据获取逻辑放在服务端可执行、且不影响 hydration 的位置：
- 使用 serverPrefetch（Vue 2）或 useAsyncData（Nuxt 3）、definePageMeta + asyncData（Nuxt 3）等框架封装方案
- 在 created 或 setup() 中调用 API 时，先判断运行环境：
if (typeof window === 'undefined')或使用process.server（Nuxt） - 避免在
mounted中拉取首屏必需数据——这会导致客户端白屏或闪烁，违背 SSR 初衷
Hydration 差异引发的常见问题
客户端 hydration 时若服务端与客户端渲染结果不一致，Vue 会发出警告并降级为重新渲染。生命周期钩子使用不当是常见诱因：
- 在
created中读取Math.random()、Date.now()或本地时间，导致服务端/客户端输出不同 HTML - 在
setup()中未加判断就访问localStorage或navigator，服务端抛错 - 依赖服务端未提供的响应式状态（如未在服务端预置 store 数据），导致客户端 mounted 后视图跳变
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
