Vue 3 中的 toRef 和 toRefs 函数

Vue 3 中的 toRef 和 toRefs 函数

在 Vue 中，我们经常需要在组件中使用响应式对象的属性。例如，在一个用户信息组件中，我们可能需要使用一个 user 对象的 name 和 age 属性。

但是，当我们直接在模板中使用这些属性时，会有一个问题：当这些属性的值发生变化时，组件将会重新渲染，即使其他属性的值没有发生变化。这将会影响组件的性能和用户体验。

为了解决这个问题，Vue 3 中提供了两个函数：toRef 和 toRefs。这两个函数可以将一个响应式对象的属性转换为引用，以便在组件中使用。

toRef 函数用于将一个响应式对象的属性转换为引用。它接收两个参数：一个响应式对象和一个字符串，表示要转换的属性名。例如：

const user = reactive({
   
  name: 'John'