Vue3 响应式实践——reactive与ref

前言

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

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

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

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

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

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

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