reactive 已死，ref 当立？Vue3 响应式最佳实践，看这一篇就够了！

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

还在跟 Vue3 响应式数据的各种幺蛾子斗智斗勇？用了reactive，数据改了，页面却没反应？解构一时爽，结果响应式没了？别头疼了！这篇直接给你把 Vue3 响应式 API 的那些弯弯绕绕讲透彻，让你彻底跟reactive的坑说拜拜，以后只宠ref这位“小甜甜”！

刚上手 Vue3 的小伙伴，可能觉得reactive声明对象挺顺手。但真到项目里，你会发现reactive这家伙，坑你没商量！下面这些场景，都是过来人的血泪教训！

场景一：给 reactive 对象整个换掉？页面不认账！

看明白了吗？直接给reactive对象赋个新值，或者用reactive再处理一次，原来的响应式就没了！页面根本不认新数据！想更新数据？老老实实改对象的属性，或者用Object.assign。

这个问题，看着简单，实际项目中很容易犯！

场景二：reactive 的属性拿出来用？数据不同步！

把reactive对象的属性解构出来，或者赋值给别的变量，拿到的只是一个普通的值，跟原来的响应式对象没关系了！改了也不会触发页面更新！ 想要有响应, 可以用toRefs，但是每个都得加.value，不嫌麻烦吗？直接操作原来的对象（state.count），不香吗？

reactive处理简单类型,不行！

不需要写代码了，reactive直接忽略这种数据类型，所以数字，字符串这种类型的数据用它处理后没有响应式效果，牢牢的记住就行！

ref：关键时刻还得靠我！

说了这么多reactive的不是，是时候请出我们的主角ref了！它才是解决问题的“真命天子”！

看看，ref多省心！统一用.value访问和修改，再也不用担心响应式出问题！不管你是直接赋值、改属性、还是解构，ref都给你安排得明明白白！

总结：ref 它不香吗？

reactive看着简单，坑却不少。ref虽然多了个.value，但能让你少踩 99% 的坑！

•ref啥都能用，reactive只能处理对象和数组。

•ref稳如老狗，reactive动不动就“闹脾气”。

所以，能用ref就别用reactive！除非你特别熟悉reactive，不然ref才是你的“最佳伴侣”！ (记住: 即使你使用了toRefs处理了，ref数据类型的修改和访问还是需要.value.)