💓 博客主页：瑕疵的CSDN主页
📝 Gitee主页：瑕疵的gitee主页
⏩ 文章专栏：《热点资讯》
Vue 3 setup语法糖用错？数据不更新的真相！
目录
昨天改需求，setup语法糖写得飞起。点按钮，页面count没变。气得想砸键盘。
报错现场
<scriptsetup>letcount=0// 这里埋雷functionincrement(){count++// 按钮点了没反应}</script>核心根源
setup语法糖不是魔法。你写let count=0，Vue根本不知道count是响应式数据。
底层原理：Vue 3的响应式系统需要ref或reactive包装。setup语法糖只是省了return，但变量必须被响应式系统托管。
直接赋值count++，Vue监听不到变化，DOM自然不更新。坑死了，我debug到凌晨三点。
解决代码
必须用ref包裹，修改时加.value：
<scriptsetup>import{ref}from'vue'// 关键！必须导入// 用ref创建响应式变量constcount=ref(0)// count是ref对象functionincrement(){count.value++// 必须加.value}</script>对比错误 vs 正确
| 错误写法 | 正确写法 |
|---|---|
let count = 0 | const count = ref(0) |
count++ | count.value++ |
| 结果：不更新 | 结果：正常更新 |
再看reactive写法（别和ref混用）：
<scriptsetup>import{reactive}from'vue'conststate=reactive({count:0})// 用reactivefunctionincrement(){state.count++// 直接改属性，不用.value}</script>避坑总结
- setup语法糖里，所有响应式数据必须用ref/reactive
别用let/const直接声明变量。Vue不自动转成响应式。 - 修改时加.value
ref用count.value++，reactive直接state.count++。 - 别忘了import
不写import { ref } from 'vue'？报错比数据不更新还惨。
记住：setup语法糖只是语法糖。底层还是Vue响应式系统在跑。
坑了我一晚上，别再踩了。
（写完这段，终于能去睡了）
