为什么 Vue3 中 reactive 对基础数据类型无效，界面却依然发生变化？

vue3 reactive的响应式疑惑

在 Vue3 中，reactive 和 ref 都是管理响应式数据的工具。但是，当将基础数据类型（如数字）作为 reactive 的参数时，可能会出现一些意想不到的行为。

一个常见的现象是，虽然控制台输出警告“value cannot be made reactive: 1”，但界面上的数字仍然会响应式变化。同时，当移除 ref 创建的变量后，reactive 也将停止响应式。

造成这种现象的原因在于以下几个方面：

• reactive 代理对象：reactive 只能代理对象，无法代理基础数据类型。因此，在上面的示例中，reactive 创建的变量实际上并不是响应式的。
• 依赖收集以组件为单位：Vue3 的依赖收集是以组件为单位的。当 ref 创建的变量更新后，触发更新依赖，这会使包含在同一组件中的所有内容重新运行。
• diff 算法：diff 算法用于比较新旧数据之间的差异。在这个示例中，reactive 创建的变量恰好与 ref 创建的变量同时更新。因此，diff 算法认为 reactive 创建的变量也需要更新，从而导致界面上的变化。

因此，当将基础数据类型作为 reactive 的参数时，需要注意其实际上并不是响应式的。而界面上的变化可能是由于其他响应式对象的更新造成的。

以上就是为什么 Vue3 中 reactive 对基础数据类型无效，界面却依然发生变化？的详细内容，更多请关注其它相关文章！