核心是主动管理加载状态与渲染时机：用loading状态配合v-if或条件渲染，首次渲染即显示骨架屏占位，异步完成后再切换真实内容，避免闪烁；vue中mounted调用独立async方法，react中componentdidmount调用async函数更新state。
在类组件生命周期钩子中使用 async/await 做预加载，核心不是“让钩子等异步完成”，而是主动管理加载状态与渲染时机——Vue 和 React 都不等待 async 钩子执行完毕就继续渲染，所以“规避闪烁”的关键在于：提前占位、延迟真实内容展示、错误兜底。
用 loading 状态配合 v-if 或条件渲染
首次渲染时，不等数据就直接挂载骨架或占位符；等异步完成再切换真实内容。这样 DOM 不会因数据为空而闪动或重排。
- Vue 中：
v-if="loaded"控制区块渲染，mounted里触发加载并设loaded = false → true - React 类组件：
state = { loaded: false, data: null }，在componentDidMount调用 async 方法更新 state - 避免用
v-show或display: none，它们只是隐藏而非卸载，仍可能触发无效渲染或样式抖动
把 async 操作从钩子中“解耦”出来
不要直接给 mounted 或 componentDidMount 加 async，因为 Vue/React 不会 await 它；而是定义独立的 async 方法，在钩子里调用它。
- Vue 示例：
<script><br>export default {<br> data() { return { list: [], loading: true }; },<br> mounted() { this.loadList(); },<br> methods: {<br> async loadList() {<br> try {<br> this.list = await api.getList();<br> } finally {<br> this.loading = false;<br> }<br> }<br> }<br>};<br></script>
- React 类组件示例：
componentDidMount() {
this.fetchData();
}
fetchData = async () => {
try {
const res = await fetch('/api/init');
const data = await res.json();
this.setState({ data, loaded: true });
} catch (err) {
this.setState({ error: true });
}
};
预加载多资源时优先并行，但控制粒度
若需拉取用户信息、配置项、权限列表等多个不依赖的接口，用 Promise.all 并行发起，缩短总耗时；但注意别一次性压垮服务端或触发节流。
- Vue 中可写：
const [user, conf, perms] = await Promise.all([getUser(), getConfig(), getPerms()]) - React 中同理，但建议封装成 service 层方法，便于 mock 和复用
- 若某一项失败不影响主流程（如埋点配置），可用
Promise.allSettled替代，避免全链路中断
加骨架屏 + 错误 fallback，比“等完再渲染”更可靠
纯靠 await 等数据完成再渲染，一旦超时或失败，页面就是白屏。真正稳健的做法是：骨架屏撑住首帧，加载中显示进度，失败时展示重试按钮。
- Vue 模板结构示例：
- React 类组件中，可在 render 里根据
this.state分支返回不同 UI - 骨架屏高度/结构应与真实内容一致，避免布局跳变（layout shift）
