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 的参数时，需要注意其实际上并不是响应式的。而界面上的变化可能是由于其他响应式对象的更新造成的。
立即学习“前端免费学习笔记（深入）”；
