Vue--课堂实训
该文介绍 Vue 3 中 `toRefs()` 函数的实际用法。示例中先通过 `reactive` 创建包含姓名、年龄、性别的响应式对象 `person`,再用 `toRefs` 将其解构为多个 ref 值,使模板可直接使用且保持响应式。随后设置 4 秒定时器,修改 `name.value`、`age.value`、`gender.value` 为李四、25、女,页面数据随之更新,控制台输出提示。读者可借此理解:`toRefs` 能将响应式对象转换为普通 ref 对象,解构后不丢失响应性,适用于在 `script setup` 中便捷操作响应式数据,并实现延时更新视图的效果。