核心不是“能不能加”，而是“在哪加、怎么加才不破坏执行时序和状态一致性”；主流框架生命周期钩子本身不支持直接 await，强行使用会导致逻辑错乱、状态丢失或 UI 卡顿，仅 onMounted、useEffect 内部等明确允许异步的钩子可安全 await，且需包裹在普通函数中调用，不可直接声明为 async。
在框架生命周期中使用 async 和 await，核心不是“能不能加”，而是“在哪加、怎么加才不破坏执行时序和状态一致性”。主流前端框架（React、Vue、Svelte 等）的生命周期钩子本身**不支持直接返回 Promise 或 await 异步操作完成后再继续渲染流程**——它们不是为等待异步而设计的。强行 await 会导致逻辑错乱、状态丢失或 UI 卡顿。
哪些生命周期钩子可以安全使用 async/await
仅限那些明确允许异步、且不参与同步渲染流程的钩子：
- React：useEffect 内部可 await —— useEffect 本身是同步注册的，但回调函数内部可以写 async 函数并 await。注意必须手动创建 IIFE（立即执行函数），因为 useEffect 不接受 async 回调：
useEffect(() => {
const loadData = async () => {
try {
const data = await fetch('/api/user').then(r => r.json());
setUser(data);
} catch (err) {
setError(err);
}
};
loadData();
}, []);
- Vue 3：onMounted、onUpdated 等组合式 API 钩子内部可 await —— 同样需包裹在普通函数中调用，不能直接将钩子声明为 async：
onMounted(async () => {
// ❌ 错误：onMounted 不会等待这个 async 执行完
// ✅ 正确：主动调用即可
const init = async () => {
const res = await api.getUser();
user.value = res;
};
init();
});
- Svelte：onMount 中可 await —— Svelte 的 onMount 明确支持返回 Promise，会自动等待其 resolve 后再认为组件已挂载完成（适用于服务端渲染兼容场景）：
onMount(async () => {
const data = await loadSettings();
$settings = data;
});
哪些地方绝对不能 await
这些位置一旦 await，会直接破坏框架行为：
- React render 函数内 —— JSX 是同步求值的，不能出现 await；否则语法报错或中断渲染。
- Vue template 表达式或 computed getter 中 —— 模板和计算属性必须同步返回值，await 会让其返回 Promise 对象，导致显示 [object Promise]。
- 组件构造过程（如 React class 组件的 constructor、Vue 2 的 data 函数） —— 这些阶段要求立刻返回确定值，无法等待异步结果。
如何处理“需要异步数据才能渲染”的场景
这不是靠 await 解决的，而是靠状态驱动 + 条件渲染：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 初始化 state 为 null / loading 状态（如
const [data, setData] = useState(null)） - 在副作用钩子（useEffect/onMounted）中发起请求并更新 state
- 在 JSX 中判断：
{data ? <Content data={data} /> : <Spinner />}
不要试图“等数据回来再开始渲染”，而是“边渲染边响应状态变化”——这是现代框架异步处理的共识模式。
服务端渲染（SSR）中的特殊注意事项
在 Next.js、Nuxt、SvelteKit 等支持 SSR 的框架中，页面级异步数据获取有专门机制：
- Next.js 使用
getServerSideProps或generateStaticParams，它们本身就是 async 函数，框架会等待其完成再生成 HTML。 - Nuxt 使用
asyncData或useAsyncData，内部已封装好 SSR/CSR 兼容逻辑。 - 切勿在这些函数外自行 await 数据，否则可能造成水合不一致（hydration mismatch）。
