在 vue 3 组合式 api 中，直接解构 reactive 或 props 会丢失响应性；应使用 torefs 保持响应式，或用 toref 按需包装单个属性。
在 Vue 3 组合式 API 中，对象解构是高频操作，但直接解构响应式对象（如 reactive 或 props）会丢失响应性 —— 这是最容易踩的坑。
别直接解构 reactive 对象
reactive() 返回的是一个 Proxy 代理对象，它的响应性依赖于对原对象属性的访问。一旦解构，得到的就是普通值（或普通引用），不再受 Vue 响应系统追踪。
❌ 错误写法：
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = state // ❌ 解构后 count 和 name 不再响应
console.log(count) // 0（只是快照，修改它不会触发更新）
用 toRefs 保持响应性
对 reactive 对象解构时，先用 toRefs() 将其每个属性转为独立的 ref，再解构 —— 这样每个变量仍是响应式的。
✅ 正确写法：
import { reactive, toRefs } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = toRefs(state) // ✅ 得到的是 Ref 对象
// 使用时需 .value（模板中自动解包，无需 .value）
count.value++ // 触发视图更新
解构 props 时用 defineProps 的运行时声明 + toRefs
使用运行时声明（即 defineProps({ ... })）时，props 本身已是响应式对象，但直接解构仍会丢失响应性。
✅ 推荐写法（组合式 API + TypeScript 更推荐语法糖方式，但运行时也常见）：
const props = defineProps({
title: String,
disabled: Boolean
})
const { title, disabled } = toRefs(props) // ✅ 保持响应性
// 模板中可直接用 title，逻辑中用 title.value
- 如果用
setup(props)函数式写法（非 script setup），同样适用toRefs(props) - 注意：
toRefs只对对象中已存在的属性生效；新增属性不会被自动 ref 化
需要解构并重命名 / 设置默认值？用解构别名 + toRef
当要重命名、设默认值，或只取部分字段时，toRefs 不够灵活。此时可用 toRef 手动包装单个属性：
import { reactive, toRef } from 'vue'
const state = reactive({ count: 0, message: null })
// 解构重命名 + 默认值（message 不存在时 fallback 为空字符串）
const count = toRef(state, 'count')
const msg = toRef(state, 'message') || ref('')
// 或更稳妥地配合 computed / 逻辑判断
-
toRef(obj, key)返回一个 ref，始终与obj[key]同步（包括后续赋值） - 适合按需包装，比
toRefs更细粒度，也避免解构出未定义字段报错
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
