Vue 3 中 reactive 能接收基本数据类型并实现响应式吗？

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《Vue 3 中 reactive 能接收基本数据类型并实现响应式吗？ 》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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 能接收基本数据类型并实现响应式吗？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！