更改子組件內部 props 創建的數組元素也會影響父組件的 props | Vuejs 3

Question

我有一個父組件（App），其中有一個對象數組。 我將此數組作為道具傳遞給子組件（UserLocations）。 現在在子組件中，我使用這個數組並創建一個數據變量。

因此，如果我要更改數組的一個元素，那么為什么父組件的屬性也會更改。

應用程序

<template>
  <user-locations :initalLocations="locations"/>
</template>

<script>
import UserLocations from './components/UserLocations.vue'

export default {
  name: 'App',
  components: {
    UserLocations
  },
  mounted() {
  },
  data: function() {
    return {
      locations: [
        {"id": 121, name: "test 121", "order": 1},
        {"id": 122, name: "test 122", "order": 2},
        {"id": 123, name: "test 123", "order": 3},
        {"id": 124, name: "test 124", "order": 4}
      ]
    }
  }
}
</script>

用戶位置.vue

<template>
    <ul>
        <li v-for="(location) in locations"
        :key="location.id"
        > 
        <span @click="decreaseOrder(location)">Up</span>
        {{ location.name}} {{location.order}}
        <span @click="increaseOrder(location)">down</span>
        </li>
    </ul>
</template>
<script>

export default {
    data: function() {
        return {
            locations: [...this.initalLocations]
        }
    },
    props: {
        initalLocations: { 
            type: Array,
        },
    },
    // computed: {
    //     locations() {
    //         return [
    //             ...this.initalLocations
    //         ]
    //     }
    // },
    methods:{
        increaseOrder(location) {
            if (location.order != this.locations.length) {
                this.locations = this.locations.map(l => {
                    var returnLocation = {...l};
                    if (l.id == location.id) {
                        l.order += 1
                    }
                    return returnLocation
                });
            }
        },
        decreaseOrder(location) {
            if (location.order != 1) {
                this.locations = this.locations.map(l => {
                    var returnLocation = {...l};
                    if (l.id == location.id) {
                        l.order -= 1
                    }
                    return returnLocation
                });
            }
        },
    }
}
</script>

如您所見，我使用initalLocations道具在 UserLocations 組件內制作位置道具，當我通過單擊向上/向下按鈕更改數組對象之一時，它會更改傳遞給 UserLocations 的道具而不是更改本地數據“位置”

Answer 1

展開運算符不會深入克隆數組，您需要一個克隆數組而不是引用它的函數：

<script>
function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }


    if (obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepCopy(item);
            return arr;
        }, []);
    }

    if (obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepCopy(obj[key]);
            return newObj;
        }, {})
    }
}

export default {
    data: function() {
        return {
            locations: deepCopy(this.initalLocations)
        }
    },
...