在 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 会自动触发更新：
