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 能接收基本数据类型并实现响应式吗？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
732
