Vue3 中 reactive 接收基础数据类型为何会响应式？

vue3 中 reactive 响应基础数据类型的疑惑

在 vue3 中，使用 reactive 和 ref 创建变量时，会出现一些令人疑惑的情况：

reactive 接收基础数据类型也会响应式？

按照官方的说法，reactive 只能代理对象。但是，在一个例子中，reactive 接收了一个数字作为参数，并且界面上的数字会随着定时器的调用而响应式变化。

为什么去掉 ref 后 reactive 就不会响应式了？

立即学习“前端免费学习笔记（深入）”；

当在上述例子中移除 ref 创建的变量时，reactive 将不再响应式。

解释

虽然 reactive 接收了基础数据类型，但它实际上并没有使该数据类型成为响应式的。这是因为 Vue3 的依赖收集是以组件为单位的。

当创建 ref 对象时，该对象是一个响应式对象。因此，更新 ref 时的依赖收集会将 render 函数收集为其依赖项。

当 ref 更新后，触发更新依赖，导致 render 重新运行。在 diff 算法中，除了更新 ref 本身，也会更新其他变化的响应式对象，例如 reactive。

因此，reactive 并不是真正的响应式，而是恰好在 ref 更新时被捎带更新了。