在 Vue 的 computed 里直接 await 接口返回为什么常得到 Promise 或旧值，正确边界是什么？

先用最小代码看清现象

下面的片段只演示“Vue computed 里 await 的陷阱与边界”最关键的一步。先顺着正常路径读一遍，再改动一个输入，就能直接看到结论在什么条件下成立。

阅读时重点找出哪一行对应“判断时要说明 computed 同步返回值且不应承载异步副作用，异步数据应放进 ref 流程”，然后观察依赖是否被追踪、组件是否更新以及侦听回调的执行时机。这样比从定义开始背更容易留下具体印象。

<!-- 在 Vue 的 computed 里直接 await 接口返回为什么常得到 Promise 或旧值，正确边界是什么？; 观察点：判断时要说明 computed 同步返回值且不应承载异步副作用，异步数据应放进 ref 流程 -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
watch(count, (value, oldValue) => console.log({ value, oldValue }))
</script>

<template><button @click="count++">{{ doubled }}</button></template>

代码背后的原因

判断时要说明 computed 同步返回值且不应承载异步副作用，异步数据应放进 ref 流程。示例把这个机制放进了真实的 API、语法或配置中，因此要关注产生结果的操作，而不是把整段代码当成固定模板照抄。

先确认数据是 ref、reactive、计算值还是普通变量，再看读取发生在哪个响应式上下文。对“判断时要说明 computed 同步返回值且不应承载异步副作用，异步数据应放进 ref 流程”来说，如果这个条件改变，相同代码可能进入另一条分支、返回不同状态，甚至根本不执行。

放到真实项目里怎么判断

解构、异步回调和生命周期边界可能丢失响应关系或留下副作用，需要结合最小组件验证。验证“判断时要说明 computed 同步返回值且不应承载异步副作用，异步数据应放进 ref 流程”时先保留正常路径，再增加一个直接相关的反例。一次只改一个条件，才能知道差异究竟来自哪里。

验证“Vue computed 里 await 的陷阱与边界”不能只看有没有报错，还要检查依赖是否被追踪、组件是否更新以及侦听回调的执行时机。涉及资源或异步任务时，也要确认结束后是否正确取消、关闭或释放。

容易答错的地方

记住结论，却忘了前提

只复述“判断时要说明 computed 同步返回值且不应承载异步副作用，异步数据应放进 ref 流程”仍可能答错，因为它依赖先确认数据是 ref、reactive、计算值还是普通变量，再看读取发生在哪个响应式上下文。先说适用条件，再说结果。

用一次现象证明所有情况

单次成功只能说明当前输入可用。至少增加一个反例，并检查依赖是否被追踪、组件是否更新以及侦听回调的执行时机，才能区分偶然现象与稳定机制。

面试官还会怎么问？

把知识连起来