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

【问题标题】：why prop value is changing with data changes in vuejs3?为什么 prop 值会随着 vuejs3 中的数据变化而变化？
【发布时间】：2021-08-22 17:52:02
【问题描述】：

我得到的道具

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）。我不希望更改该道具，因为我使用的是旧道具值。为什么会发生这种奇怪的事情？

【问题讨论】：

【解决方案1】：

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

解决方案是将原始数组深度复制到一个新数组中。一种方法是将map 数组转换成新的spread objects：

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

【讨论】：