当前位置：首页 > news >正文

reactive 解构赋值给 ref

news 2025/7/5 13:09:33

在 Vue 3 中，当你执行以下操作时：

javascript

const applyBasicInfo = ref();
applyBasicInfo.value = { ...props.applyBasicInfo };

最终的 applyBasicInfo.value 是响应式对象，但与原对象 props.applyBasicInfo 的响应性完全独立，且解构过程本身会丢失原对象的响应性连接。

关键分析

1. 解构操作 `{ ...props.applyBasicInfo }` 的行为

这会创建一个全新的普通对象，属性值会被复制到新对象中。
如果 props.applyBasicInfo 是响应式对象（如 reactive 生成），其属性的响应性会丢失（解构后的值是原始值，而非响应式引用）。

2. 赋值给 `ref` 的行为

当你将普通对象赋值给 ref.value 时，Vue 会自动用 reactive() 包裹它，使其成为响应式对象。
因此，applyBasicInfo.value 最终会是一个独立的响应式对象，但与原对象 props.applyBasicInfo 无关联。

示例验证

javascript

import { reactive, ref, isReactive } from 'vue';// 原对象是响应式的
const props = reactive({applyBasicInfo: { name: 'John', age: 25 }
});// 创建 ref
const applyBasicInfo = ref();// 解构并赋值
applyBasicInfo.value = { ...props.applyBasicInfo };// 验证结果
console.log(isReactive(applyBasicInfo.value)); // 输出: true ✅
console.log(applyBasicInfo.value === props.applyBasicInfo); // 输出: false ❌

结果总结

操作	结果	响应性	与原对象关联性
`{ ...props.applyBasicInfo }`	创建新普通对象	❌ 丢失原响应性	无关联
`applyBasicInfo.value = 新对象`	Vue 自动用 `reactive()` 包裹	✅ 新对象独立响应式	无关联

需要注意的陷阱

响应性独立
修改 applyBasicInfo.value 的属性会触发响应式更新，但不会影响原对象 props.applyBasicInfo，反之亦然。
解构的响应性丢失
如果 props.applyBasicInfo 的某些属性是响应式引用（如 ref），解构会直接获取其值（例如 ref.value），导致响应性丢失。例如：

javascript
```
props.applyBasicInfo = reactive({ count: ref(0) });
applyBasicInfo.value = { ...props.applyBasicInfo };
// applyBasicInfo.value.count 是 0（普通值，非响应式）
```

如何保持与原对象的响应性连接？

方案 1：直接引用原对象

javascript

// ✅ 直接使用原响应式对象
applyBasicInfo.value = props.applyBasicInfo;

方案 2：深拷贝为响应式对象（独立响应性）

javascript

import { reactive } from 'vue';// ✅ 深拷贝并保持独立响应性
applyBasicInfo.value = reactive({ ...props.applyBasicInfo });

方案 3：使用 `toRef` 保持响应性连接

javascript

import { toRef } from 'vue';// ✅ 将原对象的属性转为响应式引用
applyBasicInfo.value = {name: toRef(props.applyBasicInfo, 'name'),age: toRef(props.applyBasicInfo, 'age')
};