reactive 解构赋值给 ref

在 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 ❌

结果总结

需要注意的陷阱

1. 响应性独立
   修改 applyBasicInfo.value 的属性会触发响应式更新，但不会影响原对象 props.applyBasicInfo，反之亦然。

2. 解构的响应性丢失
   如果 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')
};

核心结论

• 解构会丢失响应性，但赋值给 ref 时会自动转为响应式对象。

• 新旧对象完全独立：修改 applyBasicInfo.value 不会影响原对象 props.applyBasicInfo。

• 如果需要保持与原对象的响应性连接，避免解构，直接操作原对象。