Vue 3中的ref 和 reactive，toRefs 和 toRef

在 Vue 3 中，ref 和 reactive 是用来创建响应式数据的两种不同方式，它们有各自的特点和适用场景。

1. ref:

   • ref 用于将基本类型（如：字符串、数字）转化为一个带有 .value 属性的对象，这个属性是响应式的。
   • 对于嵌套的数据结构，当使用 ref 包裹时，内部的属性也会自动变为响应式的，无需手动转换，但是自动转换时必须伴随.value。
   • 当你需要直接操作 DOM 元素或子组件实例时，ref 也可以用作特殊的属性值，它会指向相应的 DOM 节点或子组件实例。

2. reactive:

   • reactive 接收一个普通的 JavaScript 对象然后返回该对象的响应式代理。它不会处理基本类型，只适用于对象（包括数组）。
   • 使用 reactive 创建的对象的所有嵌套属性都会变成响应式的，且是深层响应式的。
   • 不适合直接用于基本类型。

选择使用哪一个取决于你的具体需求。如果你需要包装一个基本类型或者你想要一个更简单的 API 来访问和修改响应式数据，那么你可以使用 ref。如果你有一个复杂的对象并且希望整个对象都是响应式的，那么 reactive 可能更适合。

补充：ref创建的对象可以直接整体更新值，而reactive不行。

 

toRefs 和 toRef 是 Vue 3 中提供的工具函数，用于处理响应式对象的解构问题，确保解构后的属性仍然保持其响应性。

1. toRefs:

   • toRefs 接收一个由 reactive 创建的响应式对象，并返回一个普通对象，其中原始对象的所有属性都被转换成了 ref。
   • 这对于将响应式对象的属性解构到单独的变量中非常有用，同时确保每个解构出来的属性都保留了它的响应性。
   • 使用场景：当你需要解构一个响应式对象（例如从 setup 函数返回）并且不希望失去响应性时。

2. toRef:

   • toRef 可以用来创建一个引用（ref），它与源响应式对象上的某个特定属性绑定。这意味着对这个 ref 的任何修改都会反映回原对象的对应属性上，反之亦然。
   • 它适用于当你不想直接使用 reactive 对象但又想保持对对象上某一个属性的响应式连接时。
   • 使用场景：当你只需要响应式地跟踪对象上的一个或几个属性时，可以使用 toRef 来创建这些属性的响应式引用，而不需要将整个对象转换为 refs。

两者的主要区别在于 toRefs 是将整个响应式对象转换成一个所有属性都是 ref 的新对象，而 toRef 则是针对单个属性创建一个与源属性同步的 ref。