props解构会丢失响应性，因解构出的是普通值；toRef可安全提取单个prop字段并保持响应连接，返回只读ref，修改会触发警告，需通过emit通知父组件更新。
Vue 3 中，props 不能直接解构，否则会丢失响应性——因为解构出来的变量是普通值，脱离了 props 的只读响应式代理。而 toRef 正是用来安全“提取”单个 prop 字段并保持响应连接的关键工具。
为什么 props 解构后不响应？
Vue 把传入的 props 包装成一个只读的 Proxy 对象，所有属性访问都经过拦截，从而实现依赖追踪。但写法如 const { title, id } = props，本质是把 props.title 当前的值（比如字符串或数字）拷贝出来，变成普通变量。后续改 title = 'new' 只是改局部变量，和父组件毫无关系，视图自然不动。
用 toRef 提取单个 prop 字段
当你只关心某几个 prop，或需要把某个 prop 传给组合式函数、watch、computed 等时，toRef 是最稳妥的选择：
- 接收
props和属性名（字符串），返回一个标准的ref对象 - 这个
ref.value和源 prop 属性实时同步：改ref.value→ 父组件状态更新（如果父用的是 ref）；父更新 →ref.value自动变 - 即使该 prop 当前不存在（比如异步加载中），
toRef(props, 'data')也会返回一个ref(undefined)，不会报错
示例：
立即学习“前端免费学习笔记（深入）”；
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
import { defineProps, toRef } from 'vue'
const props = defineProps({
title: String,
count: Number,
user: Object
})
// ✅ 安全提取，保持响应性
const titleRef = toRef(props, 'title')
const countRef = toRef(props, 'count')
// 修改它，会触发父组件更新（前提是父传的是 ref）
countRef.value++ // 父组件的 count 值同步变化
// 也可用于 watch 或 computed
import { watch } from 'vue'
watch(countRef, (newVal) => {
console.log('count changed to:', newVal)
})
toRef vs toRefs 在 props 场景下的取舍
toRefs 适合一次性解构全部 prop 并保持响应性，但它会为每个字段都创建一个 ref，模板里要写 {{ titleRef.value }} ——这很啰嗦，也不符合 Vue 模板自动解包的习惯。
更推荐的做法是：
- 模板中直接用
{{ props.title }}（Vue 会自动追踪响应式访问） - 脚本逻辑中，只对**需要单独操作、传递或监听的字段**，用
toRef提取 - 避免用
toRefs(props)再解构，除非你明确需要在组合函数中批量处理多个 prop 引用
特别注意：props 是只读的
toRef(props, 'xxx') 返回的 ref 是只读的（底层仍是只读 proxy 的引用）。如果你尝试修改它，Vue 会在开发模式下给出警告：
titleRef.value = 'new' // ⚠️ Warning: Set operation on key "title" failed: target is readonly.
这是有意设计——强制子组件不直接改父状态。如需修改，应通过 emit 通知父组件，由父组件更新自身 ref/reactive 数据。
