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

珍惜时间，勤奋学习！今天给大家带来《为什么 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 的参数时，需要注意其实际上并不是响应式的。而界面上的变化可能是由于其他响应式对象的更新造成的。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~