通过传播操作员创建的对象怪异行为

Question

我正在使用vue.js vue.js一个传播操作员，以创建一个新数组并在其中找到一个将分配给selectedEmployee数据属性的值：

selectEmployee(id) {
  const employees = [...this.employees];
  this.selectedEmployee = employees.find(employee => employee.id === id);
},

无论哪种方式，通过v-model修改selectedEmployee值也修改了保存在paginatedEmployees属性上的记录，该记录是这样定义的：

async fetchEmployees() {
  this.loading = true;
  try {
    const response = await axios.get('/api/employees');
    this.employees = response.data.employees;
    this.paginatedEmployees = _.chunk(this.employees, 10);
    this.pages = this.paginatedEmployees.length;
  } catch (e) {
    this.error = true;
    this.requestMessage = e.message;
  } finally {
    this.loading = false;
  }
},

任何想法为什么会发生这种情况？

Answer 1

传播制作浅副本，这意味着您拥有相同员工的新数组。

您需要制作选定员工的副本，以便您不会突变原始员工。

请记住，这也将是浅副本，因此，如果您的员工具有嵌套对象，这些对象仍然会像您的数组情况一样引用原件。这就是使如此便宜的操作与a deep copy/clone的传播的原因。