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

原文地址：https://blog.csdn.net/qq_30193097/article/details/145026701

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！