在 vue 3 的 setup 中不能直接解构响应式对象，否则会丢失响应性；必须使用 torefs 或 toref 才能保持响应式连接。
在 Vue 3 的 setup 中直接解构响应式对象（如 props 或 reactive 创建的对象）会导致响应性丢失——解构出来的变量只是普通值，不再随源数据更新。这不是语法错误，而是响应式机制的必然结果：Vue 依赖 Proxy 拦截属性访问，解构会切断这个拦截链。
为什么不能直接解构？
Vue 的响应式对象（props、reactive({})）本质是 Proxy 实例。它只在你通过 obj.key 这种方式读取时，才能触发依赖收集和更新通知。一旦写成：
-
const { title, count } = props→title和count变成普通字符串/数字，与props断开连接 -
const { name } = state（state是reactive）→name是静态快照，修改它不会触发视图更新
用 toRefs 解构整个响应式对象
适用于需要导出多个响应式字段的场景，比如把 props 或 reactive 对象的所有属性都暴露给模板。
- 调用
toRefs(props)或toRefs(state)，返回一个普通对象，每个属性都是ref - 解构后仍需通过
.value访问或修改（在模板中可省略） - 类型安全友好，配合
defineProps使用时能自动推导
示例：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
用 toRef 按需提取单个字段
当你只用到一两个属性，又不想把整个对象转成 ref，toRef 更轻量、更精准。
- 不创建副本，而是建立对原属性的“引用通道”
- 修改
xxx.value会同步更新源对象，源对象变化也会反映到xxx.value - 适合封装组合式函数或处理深层嵌套属性
示例：
const user = reactive({ profile: { name: 'Alice' } })const nameRef = toRef(user.profile, 'name')
// nameRef.value === user.profile.name，且双向联动
在 script setup 中的简化写法
使用 defineProps 宏时，TypeScript 类型推导更强，toRefs 依然适用，且更简洁：
- 声明 props 类型后，直接
const { title, count } = toRefs(defineProps(...)) - 注意：不要对
defineProps()的返回值本身解构（即不能const { title } = defineProps(...)），这仍是非响应式的 - 模板中使用时无需
.value，Vue 编译器会自动处理
不复杂但容易忽略。核心就一条：只要想解构后还保持响应，就得走 toRefs 或 toRef 这条路。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
