vue 3 reactive 真的能接收基本数据类型并实现响应式？
在 Vue 3 中，我们可以使用 reactive 和 ref 创建响应式数据。然而，许多开发者对 reactive 接收基本数据类型的响应式行为感到困惑。
在提供的示例中，reactive 和 ref 都创建了接收数字 1 的变量，并绑定到界面上。尽管控制台会输出警告，但界面上的这两个数字都会随着定时器的调用而响应式变化。
了解这种情况的关键在于，reactive 实际上并不会使基本数据类型响应式。如 Vue/reactivity 源码所示，reactive 只能代理对象：
if (target && typeof target === 'object' && Object.isExtensible(target)) { return createReactiveObject(target, 0, /** vueComponentInstance and keys */)}
那么，为什么在示例中添加 msgRef 后两个变量都会更新呢？这是因为 msgRef 是一个响应式对象，而 Vue 3 中的依赖收集是基于组件的。因此，render 函数会被收集为 msgRef 的依赖：
立即学习“前端免费学习笔记（深入）”；
当 msgRef 更新时，它会触发依赖更新，导致 render 函数重新运行。由于 diff 算法，msgReactive 即使不是响应式的，也會恰好在這次重新运行中被更新。
在這種情況下，msgReactive 只是“蹭”了 msgRef 的更新，而不是真正實現了響應式。
以上就是Vue 3 中 reactive 能接收基本数据类型并实现响应式吗？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557078.html
微信扫一扫 
支付宝扫一扫 
