vue3＜script setup＞中toref()和torefs()

在 Vue 3 中，特别是与 <script setup> 语法糖结合使用时，toRef 和 toRefs 是两个非常有用的 Composition API 函数，它们用于在 Composition API 中创建响应式引用，这些引用可以保持对原始响应式对象的响应性，同时允许你以解构的方式使用这些对象的属性，而不会丢失响应性。

toRef

toRef 函数用于将响应式对象中的某个属性转换成一个单独的响应式引用，并保持其响应性。这在你需要从响应式对象中提取一个属性，并且希望这个属性在后续的使用中仍然是响应式的时候非常有用。

<script setup>  
import { reactive, toRef } from 'vue';  
  
const state = reactive({  
  foo: 1,  
  bar: 2  
});  
  
// 使用 toRef 创建一个对 state.foo 的响应式引用  
const fooRef = toRef(state, 'foo');  
  
// 现在 fooRef 是响应式的，并且与 state.foo 保持同步  
</script>

toRefs

toRefs 函数则是将响应式对象中的所有属性转换成单独的响应式引用，并保持其响应性。这在需要将一个响应式对象解构到多个变量中，同时希望这些变量保持响应性时非常有用。

<script setup>  
import { reactive, toRefs } from 'vue';  
  
const state = reactive({  
  foo: 1,  
  bar: 2  
});  
  
// 使用 toRefs 将 state 的所有属性转换成响应式引用  
const { foo, bar } = toRefs(state);  
  
// 现在 foo 和 bar 都是响应式的，并且与 state.foo 和 state.bar 保持同步  
</script>

使用场景

• toRef：当你只需要从响应式对象中提取一个或少数几个属性，并且希望这些属性在后续的使用中保持响应性时。
• toRefs：当你需要将一个响应式对象解构到多个变量中，并且希望这些变量在后续的使用中都能保持对原始响应式对象的响应性时。

注意事项

• 使用 toRef 或 toRefs 转换后的引用，在修改其值时，实际上是修改了原始响应式对象中的值。
• 如果你不需要保持响应性，或者只是需要一次性的值，那么直接解构原始对象即可，但这样解构出来的变量将不再是响应式的。