看尤雨溪说：为什么Vue3 中应该使用 Ref 而不是 Reactive？

toRefs

import { ref, toRefs } from 'vue';

// 定义一个响应式对象
const state = ref({
  count: 0,
  name: 'Vue'
});

// 使用toRefs转换为响应式引用对象
const reactiveState = toRefs(state);

// 现在你可以对reactiveState进行解构赋值并保持响应性
const { count, name } = reactiveState;

// 当你改变count或name的值时，state的值也会相应改变
count.value++; // 相当于state.count++
name.value = 'Vue3'; // 相当于state.name = 'Vue3'