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