看尤雨溪说：为什么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'