Question

我正在使用Vue.js扩展运算符，以便创建一个新数组并在其中找到一个值，该值将分配给selectedEmployee数据属性：

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

无论哪种方式，通过selectedEmployee修改v-model的值也会修改保存在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

传播会产生浅表副本，这意味着您拥有一组新的相同员工。

您可能想复制所选雇员的副本，这样就不会对原始雇员进行变异。

请记住，这也将是一个浅表副本，因此，如果您的员工有嵌套对象，则这些对象仍将像在阵列场景中一样引用原始对象。这就是传播与 deep 复制/克隆相比如此便宜的操作的原因。

通过传播运算符奇怪的行为创建的对象

1 个答案: