toRef 是创建指向 props 单个属性的响应式引用，通过 getter/setter 与原始 Proxy 数据联动，保持响应性；用法为 const title = toRef(props, 'title')，模板中直接 {{ title }}，脚本中需 title.value 读写。
直接解构 props 会丢失响应性，因为 JavaScript 解构拿到的是那一刻的值快照，脱离了 Vue 的 Proxy 响应式追踪链路。toRef 就是用来把单个 prop 属性“安全地拎出来”，仍保持与原始响应式数据的联动。
toRef 是什么，为什么能保住响应性
toRef 不是复制值，而是创建一个指向原属性的响应式引用。它内部封装了一个 ref，其 .value 的 getter 会持续读取 props 上对应字段（触发 Proxy 的 get 拦截），setter 也会写回原位置。所以修改 toRef 返回的引用，等价于直接改 props 本身。
- 它只处理你指定的一个 key，比如 toRef(props, 'title')，不关心其他字段
- 即使该 prop 是 readonly（如来自父组件的静态配置），toRef 也能安全使用，不会报错
- 返回的是标准 ref，支持 .value 读写，模板中可直接 {{ title }}（Vue 自动解包）
怎么用 toRef 正确解构单个或多个 prop
不需要全量转换，只对真正需要在 script 中频繁操作的字段用 toRef：
- 单个字段：const title = toRef(props, 'title')
- 多个字段：const title = toRef(props, 'title'); const count = toRef(props, 'count')
- 配合解构别名：const { title: titleRef, count: countRef } = { title: toRef(props, 'title'), count: toRef(props, 'count') }
注意：不要写成 const { title } = toRef(props, 'title') —— toRef 返回的是一个 ref，不是对象，无法解构。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
和 toRefs 的关键区别在哪
toRefs 是批量操作，适合你打算把所有 props 都拆出来用；toRef 是按需点选，更轻量、更可控：
- 如果你只用 1–2 个 prop，用 toRef 更清晰，避免无谓包装其余字段
- 如果 prop 名是动态的（比如通过变量传入），toRef 支持字符串参数，toRefs 不行
- 嵌套字段如 props.user.profile.name，不能直接 toRef(props, 'user.profile.name')，得先确保 user 是 reactive 对象，再对其子属性单独 toRef
模板和逻辑中怎么配合使用
toRef 创建的引用，在模板里直接用，无需 .value；在 script 里读写都带 .value：
- 模板：{{ title }} → Vue 自动取 title.value
- 脚本读：console.log(title.value)
- 脚本写：title.value = 'New Title' → 父组件同步更新
- 想监听变化？用 watch(title, (newVal) => {...})，它监听的就是响应式连接本身
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
