在 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 会自动追踪这些变化并更新相关的视图。 - 深度嵌套：如果对象有深层次的嵌套结构，并且你需要更新深层次的属性，确保路径正确，否则可能会丢失其他层级的数据。
