toref的核心用途是将reactive对象的单个属性转换为独立但双向联动的ref，实现修改一方即同步更新另一方；其前提为源对象必须是reactive创建的响应式对象且属性名为字符串，常用于解构传参和组合式函数中保持响应性。
toRef 的核心用途，就是把 reactive 对象里的某个属性“拎出来”，做成一个独立但联动的 ref。它不复制值，而是建立双向响应式链接——改它等于改原属性，改原属性也立刻反映到它身上。这特别适合解决“只传一个字段却不想丢响应性”的场景。
toRef 创建响应式引用的关键条件
必须满足两个前提，否则无法实现联动：
- 源对象得是 通过 reactive、shallowReactive 等创建的响应式对象，普通对象不行；
- 属性名必须是字符串（或 Symbol），且最好已存在——若属性暂不存在，toRef 会返回
ref(undefined)，但后续该属性被添加时，ref 会自动同步新值。
典型使用方式：解构 + 传参 + 组合式函数调用
常见痛点是：组件接收 props 或调用组合式函数时，只想传 props.count 这一个字段，但如果直接解构 const { count } = props，就会丢失响应性。toRef 正是为此而生：
- 对 props 属性做 toRef：
const countRef = toRef(props, 'count')，再把countRef传给子函数，修改它就等于修改props.count； - 对 reactive 对象属性做 toRef：
const user = reactive({ name: 'Alice', role: 'admin' })，然后const nameRef = toRef(user, 'name')，之后可安全传入其他逻辑模块； - 模板中可直接插值
{{ nameRef }}（Vue 会自动解包 .value），JS 中读写需用nameRef.value。
和 ref、toRefs 的关键区别
避免误用，记住三点差异：
- ref(value) 创建的是全新响应式变量，与原始数据完全无关；
-
toRef(obj, key) 创建的是“代理引用”，背后始终连着
obj[key]，改谁都会影响对方； - toRefs(obj) 是批量版 toRef，等价于对 obj 每个顶层属性都调一次 toRef，常用于解构整个 reactive 对象并保持响应性。
容易踩的坑提醒
实际开发中这几个细节常被忽略：
- 别对非响应式对象用 toRef，比如
const plain = { x: 1 }; toRef(plain, 'x')—— 修改plain.x不会触发 ref 更新； - 不要以为 toRef 返回的 ref 是“只读代理”：它支持双向更新，但不提供防篡改保护，业务逻辑仍需自行校验；
- 嵌套属性要逐层处理，例如
user.profile.age，不能直接toRef(user, 'profile.age')，得先toRef(user, 'profile')再取age，或改用 computed 封装。
