toRef用于将reactive对象的属性创建为双向同步的ref，修改任一端都会同步更新另一端；适用于传参、解构保响应性、精准watch等场景。
toRef 的作用是把 reactive 对象里的某一个属性“拎出来”，变成一个独立但双向同步的 ref。它不是复制值，而是建立引用链接——改它，原对象跟着变；改原对象，它也立刻更新。
什么时候该用 toRef
当你只关心响应式对象中的某一个字段，并希望它能像普通 ref 一样被 watch、传给子组件、或在组合函数中单独暴露时，toRef 就是最合适的选择。
- 把 user.name 单独传给子组件，子组件改名也能同步更新父级数据
- 在 setup 中解构时避免失去响应性（比如 const name = toRef(state, 'name')，而不是 const { name } = state）
- 配合 watch 监听单个字段变化，写法更清晰，不会误触整个对象的响应式依赖
基本写法和效果
假设你有这样一个响应式对象：
const user = reactive({ name: 'Alice', age: 28 })
用 toRef 提取 name 字段：
const nameRef = toRef(user, 'name')
这时：
- nameRef.value 和 user.name 始终一致
- 修改 nameRef.value = 'Bob' → user.name 自动变成 'Bob'
- 修改 user.name = 'Charlie' → nameRef.value 也立刻更新
常见搭配场景
传给子组件：
父组件：<Child :name="nameRef" />
子组件用 defineProps({ name: { type: Object as PropType<Ref<string>> } }) 接收，内部改 props.name.value 会回写到父级。
配合 watch：
watch(nameRef, (newVal) => console.log('名字变了:', newVal)) —— 只监听 name，不触发整个对象的 watcher。
设默认值（可选第三参数）：
const nickname = toRef(user, 'nickname', '匿名用户') —— 如果 user.nickname 不存在，就用这个默认值初始化，且仍保持响应链接。
注意别踩坑
toRef 只对真正的响应式对象有效：
- ✅ reactive({ x: 1 })、readonly(obj)、甚至 props（在 setup 中）都支持
- ❌ 普通对象 { x: 1 } 不行——toRef 返回的只是普通 ref，改它不会影响原对象
- ⚠️ 不要用在 computed 或其他非响应式源上，否则链接失效
