Vue3 Composition API图书列表应用：提交后如何清空表单字段？

1. 错误原因 #

JavaScript中对象属于引用类型，当你把newBook对象直接推入books数组时，数组存储的并不是对象的副本，而是指向该对象的内存引用。后续清空newBook的属性时，实际上是修改了这个引用指向的原始对象数据，所以数组中已添加的对应图书条目也会同步被清空。

2. 最可靠的修复方法 #

核心思路是添加时存入对象的副本而非原引用，具体实现有两种常用方式：

方式一：对象展开语法创建新对象 #

在addBook方法中，将newBook的属性展开到新对象后再添加到数组：

// App.vue中的addBook方法
const addBook = () => {
  books.value.push({ ...newBook.value }); // 生成独立的新对象
  // 清空表单
  newBook.value = { title: '', author: '' };
};

方式二：使用Object.assign创建新对象 #

如果更习惯这种写法，也可以用Object.assign生成对象副本：

const addBook = () => {
  books.value.push(Object.assign({}, newBook.value));
  newBook.value = { title: '', author: '' };
};

同时建议用ref声明newBook（相比reactive，更适合需要整体替换对象的场景）：

// AddBook.vue中声明响应式对象
const newBook = ref({ title: '', author: '' });

这样操作后，数组里的图书数据是独立的新对象，清空表单时只会修改newBook指向的对象，不会影响已添加到数组中的数据。

内容的提问来源于stack exchange，提问作者Razvan Zamfir