Getter 中不能做高耗时异步操作，因其必须同步返回值，而 async 返回 Promise 会导致模板显示 [object Promise]、响应式失效或主线程阻塞；正确做法是将异步逻辑移至生命周期钩子中预加载并存入响应式状态，getter 仅作同步读取。
Getter 里不能做高耗时异步操作，否则会直接卡住页面渲染或逻辑执行——因为 Getter 是同步访问的语法糖，它本不该有副作用，更不该等待异步结果。
为什么 Getter 中调用 async 会卡顿
Getter 必须立即返回一个值，而 async 函数返回的是 Promise 对象，不是真实数据。如果你在 Getter 里写 await fetch(...) 或 return someAsyncFunc()，实际返回的是未完成的 Promise，上层代码（比如模板渲染、计算属性依赖）会拿到这个 Promise 并尝试读取，导致：
- Vue/React 等框架无法正确响应式追踪 Promise 内部变化
- 模板中直接使用该 getter 可能显示
[object Promise]或报错 - 若强行用
.then()或.Result同步取值，就会阻塞主线程，引发卡顿甚至 ANR
正确做法：把异步逻辑移出 Getter
Getter 只负责“读取已有状态”，异步加载应提前完成，并将结果存入响应式数据中。例如：
- 在组件初始化、生命周期钩子（如
onMounted、useEffect）中主动调用异步函数 - 把结果赋给 ref / reactive / useState 管理的状态变量
- Getter 仅返回该变量，保持纯同步
示例（Vue Composition API）：
const data = ref(null);
const loading = ref(false);
// 异步加载放在 setup 或 onMounted 中
onMounted(async () => {
loading.value = true;
data.value = await api.getUser();
loading.value = false;
});
// Getter 只读取，不触发请求
const userInfo = computed(() => data.value?.name || '加载中');
需要按需加载？用函数代替 Getter
如果某些数据确实要“点击才拉取”，那就别用 Getter，改用普通函数 + 状态缓存：
- 定义一个
loadDetail()方法，内部做异步请求并更新局部状态 - 用
ref或useState缓存结果，避免重复请求 - 模板中通过事件调用函数，而不是靠 getter 触发
这样既符合语义，也完全规避了同步接口承载异步行为的风险。
特殊情况：需要“透明”异步读取？考虑 Suspense 或状态机
现代框架提供更高级的抽象来掩盖异步细节：
- React 中可用
Suspense + lazy或自定义 Hook 封装 loading/error/data 三态 - Vue 3 支持
<Suspense>配合异步 setup，让组件在 resolve 前显示 fallback - 不要试图让 getter “看起来像同步但实际异步”，那只会制造隐蔽 bug
