vue 3 setup中变量不更新的根本原因是操作对象未被响应式代理包裹或访问路径中断；需用ref/reactive包装数据、避免解构丢失响应性、异步中更新响应式对象本身，并确保setup返回变量。
Vue 3 的 setup 中变量不更新，通常不是“写错了”，而是没触发响应式系统的核心机制——根本原因在于：你操作的对象或属性本身不在响应式代理（reactive 或 ref）的追踪范围内。
直接赋值普通对象，响应式失效
很多人在 setup 里这样写：
const state = { count: 0 } // 普通 JS 对象，非响应式
const increment = () => { state.count++ } // 修改不会触发视图更新
Vue 不会监听普通对象的属性变化。即使你在模板中用了 {{ state.count }}，它只读取一次初始值，后续修改完全静默。
- ✅ 正确做法：用
ref包裹基础类型，或用reactive包裹对象 - ✅ 示例：
const state = reactive({ count: 0 })；const count = ref(0) - ⚠️ 注意：
reactive只对对象、数组、Map、Set 等有效，不能传原始值（如数字、字符串）
解构后丢失响应性（最常见陷阱）
从 reactive 对象中解构出属性，会脱离响应式代理：
const state = reactive({ count: 0 })
const { count } = state // ❌ 解构后 count 是普通变量，不再响应式
const increment = () => { count++ } // 视图不更新
这本质是 JS 的“值拷贝”行为，count 变成一个独立的局部变量，和 state.count 再无关联。
- ✅ 正确做法：始终通过原响应式对象访问，如
state.count++ - ✅ 或用
toRefs安全解构：const { count } = toRefs(state)，它返回的是每个属性对应的ref - ? 小技巧：VS Code + Volar 插件能高亮提示这类解构风险
异步更新时修改了非响应式数据
在 setTimeout、Promise.then 或 API 回调中，容易误改原始数据而非响应式副本：
let rawData = { name: 'Alice' }
const user = reactive({ ...rawData }) // 创建响应式副本
fetch('/api/user').then(res => res.json()).then(data => {
rawData.name = data.name // ❌ 改的是原始对象，不是 user
})
结果是 user.name 没变，页面当然不更新。
- ✅ 正确做法：所有更新都作用于响应式对象本身，比如
user.name = data.name - ✅ 复杂嵌套可配合
Object.assign(user, data)或结构化赋值 - ⚠️ 特别注意：Axios 响应默认是只读的，需显式赋值，不能直接
user = response.data（这会切断响应式连接）
模板中用了未声明/未返回的变量
setup 函数必须显式返回响应式变量，否则模板无法访问：
export default {
setup() {
const count = ref(0)
const increment = () => count.value++
// 忘记 return { count, increment }
}
}
即使逻辑正确，模板里写 {{ count }} 也会报错或显示 undefined。
- ✅ 记住：只有
return出去的内容才进入模板作用域 - ✅ 推荐用解构返回：
return { count, increment }，或用setup()返回一个对象 - ? 组合式函数（composable）也一样：内部
ref必须被外层return或透出
响应式不是魔法，它是 Vue 在特定条件下建立的依赖追踪链。只要确保数据被正确包裹、访问路径未被切断、更新动作落在代理对象上，页面就会自然响应。不复杂但容易忽略细节。
