Vue3 reactive 解构后响应式丢失怎么办？toRefs 怎么用？

Question

仓乃文 · Accepted Answer

reactive 对象直接解构后变量会丢失响应式，因为解构拿到的是原始值的副本而非代理。toRefs 将 reactive 的每个属性转为 ref，解构后仍保持响应式。

问题复现：
```javascript
const state = reactive({ name: "Tom", age: 18 });
const { name, age } = state;  // 丢失响应式
name = "Jerry";  // 不会触发更新，state.name 也没变
```

toRefs 解决：
```javascript
import { reactive, toRefs } from "vue";
const state = reactive({ name: "Tom", age: 18 });
const { name, age } = toRefs(state);  // 保持响应式
name.value = "Jerry";  // 触发更新，state.name 也变了
```

toRef 单个属性：
```javascript
import { toRef } from "vue";
const age = toRef(state, "age");  // 只转一个属性
```

补充说明：
- toRefs 只能用于 reactive 对象，不能用于 ref
- 解构后的变量是 ref 类型，JS 中需要 .value 访问，模板中自动解包
- toRef 对不存在的属性也会返回一个可用的 ref（值为 undefined）
- Vue 3.5+ 支持响应式 Props 解构，defineProps 解构不再丢失响应式