在 Vue 3 中安全更新异步响应式状态需：1. 顶层用 ref 或 reactive 预声明；2. 请求后直接赋值，禁用 Object.assign 或未初始化属性访问；3. 用 useAsyncState 或手动标记处理竞态；4. 大数组用 markRaw 或分片更新防卡顿。
在 Vue 3 中，异步请求后安全更新响应式状态的关键不是“能不能改”，而是“怎么改才不掉链子”——既要确保数据真正进入响应式系统，又要避免竞态、阻塞或视图不刷新等问题。
用 ref 或 reactive 显式声明响应式起点
不要等到请求回来再创建响应式变量。必须在 setup 或 script setup 顶层就定义好：
-
基础类型或单个对象：用
ref(null)或ref([])初始化，后续直接赋值data.value = res.data -
结构较深的对象：用
reactive({ list: [], loading: false, error: null })，后续可直接修改属性state.list = res.data - 避免直接给未声明的属性赋值，比如
data.newField = 'xxx'（非 reactive 对象）或arr[0] = item（数组索引直改 Vue 不响应）
请求返回后直接赋值，别绕路
拿到 API 响应后，把结果原样赋给已声明的响应式变量即可，Vue 会自动触发更新：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- ✅ 正确：
user.value = await api.getUser(id)（user是ref()） - ✅ 正确：
state.profile = await api.getProfile()（state是reactive()） - ❌ 错误：
Object.assign(user.value, newData)（可能丢失响应性，尤其嵌套深时） - ❌ 错误：
user.value.name = 'Alice'（若user.value初始为null，此时访问.name会报错）
注意竞态和中间态管理
连续触发多次请求（如搜索框快速输入），后发请求可能比先发的晚返回，导致旧数据覆盖新数据。需主动控制：
立即学习“前端免费学习笔记（深入）”；
- 用
useAsyncState（VueUse）自动处理竞态：它内部用abortController或标记位丢弃过期 Promise - 手动加标记：在请求前设
isLatest = true，回调中判断if (isLatest) data.value = res，发起新请求时置isLatest = false - 配合
loading和error状态，让 UI 明确反馈当前处于哪一阶段
批量更新大数组时避免卡顿
如果一次拿到几千条数据并全量赋值给响应式数组，Proxy 的 getter/setter 开销可能造成卡顿：
- 对只读大数据，用
markRaw()跳过响应式转换，再手动用ref()包一层引用 - 需要部分响应式时，分片更新：
for (let i = 0; i - 长列表优先考虑虚拟滚动，而非全量渲染
