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 能接收基本数据类型并实现响应式吗？的详细内容，更多请关注其它相关文章！

Tags： 数据类型基本