vue3 reactive的响应式疑惑
在 Vue3 中，reactive 和 ref 都是管理响应式数据的工具。但是，当将基础数据类型（如数字）作为 reactive 的参数时，可能会出现一些意想不到的行为。
一个常见的现象是，虽然控制台输出警告“value cannot be made reactive: 1”，但界面上的数字仍然会响应式变化。同时，当移除 ref 创建的变量后，reactive 也将停止响应式。
造成这种现象的原因在于以下几个方面：
reactive 代理对象：reactive 只能代理对象，无法代理基础数据类型。因此，在上面的示例中，reactive 创建的变量实际上并不是响应式的。依赖收集以组件为单位：Vue3 的依赖收集是以组件为单位的。当 ref 创建的变量更新后，触发更新依赖，这会使包含在同一组件中的所有内容重新运行。diff 算法：diff 算法用于比较新旧数据之间的差异。在这个示例中，reactive 创建的变量恰好与 ref 创建的变量同时更新。因此，diff 算法认为 reactive 创建的变量也需要更新，从而导致界面上的变化。
因此，当将基础数据类型作为 reactive 的参数时，需要注意其实际上并不是响应式的。而界面上的变化可能是由于其他响应式对象的更新造成的。
立即学习“前端免费学习笔记（深入）”；
以上就是为什么 Vue3 中 reactive 对基础数据类型无效，界面却依然发生变化？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557202.html
微信扫一扫 
支付宝扫一扫 
