现在组件里用 reactive 处理了一个对象，这里可以把这个属性的名字改成 username。 在 setup 里面提供了处理之后的这个 user 对象。

有时候我们可能想解构一下这个对象，比如像这样，const 大括号 username 等于 user ， 让这个 setup 提供解构出来的 username 。在组件的模板里绑定输出 username 这个数据， 发生点击事件，设置 username 的值。

在浏览器上试一下，点击这个 username ，修改了它的值，但是组件并没有显示修改之后的值，因为解构之后数据的反应特性就不见了。

所以我们还得再特别处理一下这个要解构的对象，这里要用的是 toRefs ，用它处理一下 user ，在 vue 里在要导入这个 toRefs 。

回到浏览器再测试一下，点击 username ，修改了它的值以后，组件会立即显示修改之后的值。

这里我们也可以用一个展开操作符，注释掉这行代码，在 setup 返回的东西里面，展开执行 toRefs 的结果，把 user 交给它。

这样在组件里就可以直接使用所有在 user 里的数据了。