为什么 prop 值会随着 vuejs3 中的数据变化而变化？

Question

我得到的道具

props : {
     images : Object,
     locale : String,
},

数据方法

data() {
        return {
            form : this.$inertia.form({
                product_images : this.images.data,
            }),
        }
    },

我正在像这样在点击事件上更新 project_images

Add() {
       this.form.product_images.push({image : null});
},

但这里的问题是 project_images 更新了一个新对象。它还更新道具图像（在图像道具的数据字段中添加对象，如 product_images）。我不希望该道具被更改，因为我使用的是旧道具值。为什么会发生这种奇怪的事情？

Answer 1

JavaScript 数组是按引用复制的，因此 form.product_images 和 images.data 指的是内存中的同一个数组。编辑一个变量会影响另一个。

解决办法是将原数组深拷贝到新数组中。一种方法是将数组 map 放入新的 spread objects 中：

data() {
  return {
    form : this.$inertia.form({
      product_images : this.images.data.map(x => ({...x})),
    }),
  }
},