Vue 3 reactive多级赋值核心原则是路径各层须已存在且响应式；初始化需完整声明嵌套结构，动态新增需确保响应式，中间层未定义时须预先初始化，数组操作须用响应式方法。
Vue 3 的 reactive 对象对多级嵌套属性的赋值，核心原则是：**只要路径上的每一层都已存在且是响应式的，就可以直接点语法赋值；若某一层不存在或非响应式，则需确保其被正确初始化或使用安全方式更新。**
确保嵌套结构本身是响应式的
Vue 3 的 reactive 是浅层代理——它只代理顶层对象，内部嵌套的对象只有在被访问时才递归转为响应式（惰性转换）。但前提是：该嵌套对象必须是普通对象，且在初始定义时就存在。
- ✅ 正确初始化（推荐）：嵌套对象在创建
reactive时就完整声明
const form = reactive({
user: {
profile: { name: '', age: 0 },
contact: { email: '', phone: '' }
},
meta: { submitted: false }
});
- ✅ 后续可直接赋值（所有层级已响应式）
form.user.profile.name = '李四';
form.user.contact.email = 'lisi@example.com';
form.meta.submitted = true;
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：运行时动态新增整个嵌套对象（会丢失响应式）
form.newSection = { title: '测试' }; // newSection 是普通对象，不响应
动态添加或替换嵌套对象时用 Object.assign 或 $patch（Pinia 风格）
如果需要整体替换某一层（比如从接口拿到新数据），避免逐个赋值，用 Object.assign 安全更新已有响应式子对象：
- 仅适用于目标子对象已存在且是响应式的场景
- 不会破坏原响应式代理，也不会新建对象
Object.assign(form.user.profile, {
name: '王五',
age: 28
});
将 React 应用升级到最新版本，从类组件迁移到 Hooks，并采用并发特性。用于现代化改造 React 代码库、迁移到 React Hooks 或升级到最新
注意：不能用于 form.user = {...} 这类顶层替换（会丢失响应式），除非你明确想用新对象替代整个 user ——此时应改用 ref 或重新赋值并保持引用一致。
处理可能为空或未定义的中间层级
当不确定 form.user 或 form.user.address 是否已存在时，不能直接链式赋值（会报错）：
- ❌
form.user.address.city = '上海'（若user或address为undefined） - ✅ 先确保中间层存在（可用可选链 + 空值合并）
if (!form.user) form.user = reactive({});
if (!form.user.address) form.user.address = reactive({});
form.user.address.city = '上海';
更简洁的方式是封装一个工具函数，或使用 Lodash 的 set（需配合 proxy 特性谨慎使用，因 set 内部可能绕过 Proxy 拦截）。
数组中嵌套对象的赋值要特别注意索引有效性
对 reactive 数组操作，修改已有元素的属性没问题；但新增/删除元素必须用响应式方法：
- ✅ 修改已有项：`list[0].title = '新标题'`（前提是
list[0]存在且是响应式对象） - ✅ 新增项：`list.push(reactive({ title: '新增' }))` 或 `list.splice(index, 0, reactive({...}))`
- ❌ 错误：`list[5] = {...}`（索引超出范围时无效，且新对象无响应式）
若需批量更新数组中多个对象的某字段，建议用 map 生成新数组再整体赋值（注意保持响应式）：
form.items = form.items.map(item => ({
...item,
status: 'processed'
}));
不过更稳妥的做法是先用 structuredClone 或深拷贝后，再用 Object.assign 逐个更新已存在的响应式项。
