在 Vue 3 中，ref 和 reactive 是用来创建响应式数据的两种不同方式，它们有各自的特点和适用场景。
-
ref:ref用于将基本类型（如：字符串、数字）转化为一个带有.value属性的对象，这个属性是响应式的。- 对于嵌套的数据结构，当使用
ref包裹时，内部的属性也会自动变为响应式的，无需手动转换，但是自动转换时必须伴随.value。 - 当你需要直接操作 DOM 元素或子组件实例时，
ref也可以用作特殊的属性值，它会指向相应的 DOM 节点或子组件实例。
-
reactive:reactive接收一个普通的 JavaScript 对象然后返回该对象的响应式代理。它不会处理基本类型，只适用于对象（包括数组）。- 使用
reactive创建的对象的所有嵌套属性都会变成响应式的，且是深层响应式的。 - 不适合直接用于基本类型。
选择使用哪一个取决于你的具体需求。如果你需要包装一个基本类型或者你想要一个更简单的 API 来访问和修改响应式数据，那么你可以使用 ref。如果你有一个复杂的对象并且希望整个对象都是响应式的，那么 reactive 可能更适合。
补充：ref创建的对象可以直接整体更新值，而reactive不行。
toRefs 和 toRef 是 Vue 3 中提供的工具函数，用于处理响应式对象的解构问题，确保解构后的属性仍然保持其响应性。
-
toRefs:toRefs接收一个由reactive创建的响应式对象，并返回一个普通对象，其中原始对象的所有属性都被转换成了ref。- 这对于将响应式对象的属性解构到单独的变量中非常有用，同时确保每个解构出来的属性都保留了它的响应性。
- 使用场景：当你需要解构一个响应式对象（例如从 setup 函数返回）并且不希望失去响应性时。
-
toRef:toRef可以用来创建一个引用（ref），它与源响应式对象上的某个特定属性绑定。这意味着对这个ref的任何修改都会反映回原对象的对应属性上，反之亦然。- 它适用于当你不想直接使用
reactive对象但又想保持对对象上某一个属性的响应式连接时。 - 使用场景：当你只需要响应式地跟踪对象上的一个或几个属性时，可以使用
toRef来创建这些属性的响应式引用，而不需要将整个对象转换为 refs。
两者的主要区别在于 toRefs 是将整个响应式对象转换成一个所有属性都是 ref 的新对象，而 toRef 则是针对单个属性创建一个与源属性同步的 ref。