必须用 torefs，因为 props 是只读响应式代理，直接解构会丢失响应性；torefs 将每个 prop 转为 ref，保持依赖追踪与更新能力。
在组合式 API 中，直接解构 props 会导致响应性丢失，因为解构出来的只是普通变量（如字符串、数字），脱离了 Vue 的响应式代理（Proxy）。要安全解构并保持响应性，必须用 toRefs 将每个 prop 转为独立的 ref。
为什么必须用 toRefs？
props 是只读的响应式代理对象，它的响应性依赖于 Proxy 的 get/set 拦截。一旦写 const { title } = props，JavaScript 就把那一刻的值拷贝成普通变量，后续父组件更新 title，这个局部变量不会变，模板也不会刷新。
toRefs(props) 返回一个对象，其中每个属性都是对应 prop 的 ref（例如 { title: ref('xxx'), count: ref(0) }）。解构后得到的是 ref，不是原始值，所以能继续触发依赖收集和更新。
正确使用 toRefs 的步骤
- 先用
defineProps显式声明接收的 prop（推荐使用运行时声明或 TypeScript 接口） - 调用
toRefs(props)，再解构 - 在 script 中读取需加
.value（如title.value），但在模板中可直接写{{ title }}（Vue 自动解包）
完整示例（script setup）
```ts
import { defineProps, toRefs } from 'vue'
const props = defineProps({
title: String,
count: { type: Number, default: 0 }
})
const { title, count } = toRefs(props)
// ✅ 安全：title 和 count 都是 ref，响应式有效
console.log(title.value, count.value)
// 模板中可直接使用 {{ title }}、{{ count }}
```
注意事项与替代方案
- 如果只用某一个 prop，可用
toRef(props, 'title')，更轻量且支持可选字段 - 不要对嵌套对象（如
props.user.name）直接toRefs(props.user)，因为props.user通常不是响应式对象；应改用computed封装 - 若只是简单读取、不频繁解构，直接写
props.title最简洁，无额外开销 - 需要派生逻辑（如格式化、过滤），优先用
computed(() => props.title?.trim())，天然响应
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
