toRef和toRefs是用于创建响应式引用的函数，主要目的是在不丢失响应式下把对象数据分散/扩散

一：定义

1：toRef：接受一个源对象和一个属性键，返回一个响应式引用，会保持源对象上对应属性的响应式关联，说白了就是将对象的某个属性转换为一个独立的响应式对象

import { reactive, toRef } from 'vue';

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

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

console.log(countRef.value); // 输出：0
state.count = 1;
console.log(countRef.value); // 输出：1

2：toRefs：接受一个响应式对象，将转换为一个普通的对象，对象中的每个属性都是一个响应式引用，常用于将响应式对象结构为普通对象

import { reactive, toRefs } from 'vue';

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

const { count, message } = toRefs(state);

console.log(count.value); // 输出：0
console.log(message.value); // 输出：'Hello'
state.count = 1;
console.log(count.value); // 输出：1

二：总结

1：toRefs 的主要作用是解决解构响应式对象后丢失响应式的问题。解构响应式会使得属性失去响应式能力。使用 toRefs 转换后的属性依然保持响应式，可以继续跟踪其变化

2：toRefs 函数返回的是一个包含多个响应式引用的对象，而不是响应式对象本身

3：不创造响应式，而是延续响应式