javascript - 修改数据时是否修改了prop？

请参见以下vue / nuxt组件示例:

<template>
    <my-component v-model="selected" :options="options" />
</template>

<script>
export default {
    props: {
        currentSelected: Array,
        options: Array
    },
    data() {
        return {
            selected: this.currentSelected
        }
    }
}
</script>

当'selected'由my-component更新时，prop也正在更新，并且正在更新父组件中的数据。

这是正常行为吗？如果是(或不是)，为什么会这样？

最佳答案

这是正常现象。在Javascript中，您可以看到对象和数组作为引用。

这意味着如果您编写以下代码:

let obj = { foo: 'bar' }
let other = obj
other.foo = 'meh'

然后，obj.foo将等于'meh'。

如果要将数组克隆到组件中并避免此行为，则需要从props中复制数组中的所有值。为此，可以使用以下命令:

export default {
    props: {
        currentSelected: Array,
        options: Array
    },
    data() {
        return {
            selected: JSON.parse(JSON.stringify(this.currentSelected))
        }
    }
}

这将使您选择的变量失去对currentSelected Prop 的所有引用。