Vue3 给 reactive 响应式对象赋值

在 Vue 3 中，你可以使用 reactive 函数创建响应式对象。如果你想给这个响应式对象赋值，可以直接修改其属性。以下是一些示例：

直接修改属性

你可以直接通过点符号或方括号语法来修改响应式对象的属性。

import { reactive } from 'vue';const form = reactive({file: "",fileArr: [],fileCount: 5,content: "",
});// 直接修改属性
form.file = "newFile.txt";
form.fileArr.push("file1.txt");
form.fileCount = 10;
form.content = "This is the new content.";

使用 Object.assign 进行批量赋值

如果你需要一次性更新多个属性，可以使用 Object.assign。

import { reactive } from 'vue';const form = reactive({file: "",fileArr: [],fileCount: 5,content: "",
});// 使用 Object.assign 进行批量赋值
Object.assign(form, {file: "newFile.txt",fileArr: ["file1.txt", "file2.txt"],fileCount: 10,content: "This is the new content."
});

使用展开运算符（Spread Operator）进行批量赋值

你也可以使用展开运算符来进行批量赋值。

import { reactive } from 'vue';const form = reactive({file: "",fileArr: [],fileCount: 5,content: "",
});// 使用展开运算符进行批量赋值
form = { ...form, ...{file: "newFile.txt",fileArr: ["file1.txt", "file2.txt"],fileCount: 10,content: "This is the new content."
}};

注意事项

• 响应性：由于 reactive 创建的对象是响应式的，所以当你修改这些属性时，Vue 会自动追踪这些变化并更新相关的视图。
• 深度嵌套：如果对象有深层次的嵌套结构，并且你需要更新深层次的属性，确保路径正确，否则可能会丢失其他层级的数据。