必须用 toRef 而不是直接解构，因为 reactive 返回 Proxy，解构会丢失响应性；toRef 创建的 ref 与原属性双向联动，确保修改同步更新视图和源对象。
直接解构 reactive 对象会导致响应性丢失，比如 const { name } = user 得到的是普通字符串，改它不会更新视图，也无法同步回原对象。要安全导出单个属性给子组件，必须用 toRef 建立双向引用链接。
为什么必须用 toRef 而不是直接解构
reactive 返回的是 Proxy 代理对象，它的响应性依赖于对原始对象属性的访问拦截。一旦解构，就脱离了代理上下文：
-
const { name } = user→name是静态值，修改不触发更新 -
const nameRef = toRef(user, 'name')→nameRef是 ref，.value和user.name实时联动 - 子组件拿到
nameRef后，改props.name.value会直接写回父级user.name
在 setup 中正确导出单个属性
以用户信息为例：
import { reactive, toRef } from 'vue'
<p>export default {
setup() {
const user = reactive({
name: 'Alice',
age: 28,
role: 'editor'
})</p><pre class="brush:php;toolbar:false;">// ✅ 安全导出：为需要传递的字段创建 toRef
const nameRef = toRef(user, 'name')
const roleRef = toRef(user, 'role')
return {
// 可以直接传给模板或子组件
nameRef,
roleRef,
// user 本身也可以继续用（但不建议直接传整个 reactive 给子组件做解构）
user
}} }
子组件接收并使用
子组件需声明 props 类型为 Ref<t></t>，并确保修改时通过 .value 操作：
<!-- 父组件模板 --> <usereditor :name="nameRef" :role="roleRef"></usereditor>
// 子组件 setup
import { defineProps, ref } from 'vue'
<p>const props = defineProps({
name: { type: Object, required: true }, // 实际是 Ref<string>
role: { type: Object, required: true } // 实际是 Ref<string>
})</string></string></p><p>// 修改会同步回父组件
const updateName = () => {
props.name.value = props.name.value + ' (edited)'
}</p><p>const updateRole = () => {
props.role.value = 'admin'
}
</p>
配合默认值和可选字段
如果属性可能不存在，toRef 支持第三参数设默认值，且仍保持响应链接：
const nicknameRef = toRef(user, 'nickname', '匿名用户') // 若 user.nickname 初始为 undefined，nicknameRef.value 就是 '匿名用户' // 后续 user.nickname = 'Leo' → nicknameRef.value 自动更新为 'Leo'
这种写法既避免运行时报错，又保留了父子双向同步能力，适合配置类、用户资料等场景。
