vue3中toref和torefs

在Vue 3中，`toRef`和`toRefs`是两个与响应式相关的函数。

`toRef`函数用于创建一个指向响应式对象属性的ref。它接收两个参数：第一个参数是一个响应式对象，第二个参数是一个字符串，表示该对象的属性名。`toRef`会返回一个ref对象，这个ref对象会指向原始属性的值。

下面是一个使用`toRef`的示例：

import { reactive, toRef } from 'vue';

const state = reactive({
  count: 0,
});

const countRef = toRef(state, 'count');

console.log(countRef.value); // 输出: 0

state.count = 10;

console.log(countRef.value); // 输出: 10

在上面的示例中，我们使用`toRef`函数创建了一个名为`countRef`的ref对象，它指向了`state`对象的`count`属性。当我们修改`state.count`时，`countRef.value`也会相应地更新。

另外，Vue 3还引入了`toRefs`函数，它可以将一个响应式对象的所有属性转换为ref对象。用法如下：

import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello',
});

const refs = toRefs(state);

console.log(refs.count.value); // 输出: 0
console.log(refs.message.value); // 输出: 'Hello'

state.count = 10;
state.message = 'World';

console.log(refs.count.value); // 输出: 10
console.log(refs.message.value); // 输出: 'World'

在上面的示例中，我们使用`toRefs`函数将`state`对象的所有属性转换为ref对象，并将结果存储在`refs`变量中。通过访问`refs.count.value`和`refs.message.value`，我们可以获取原始属性的值，并且当这些属性发生变化时，ref对象也会相应地更新。