javascript - 数据变量更改时克隆到数据变量的道具更新

Question

问题：我在 Vue 组件中有一个道具。

props: {
  user_info: {
    type: Object,
    default() {
      return {}
    }
  }
}

我不仅需要使用这个道具来阅读，还需要对其进行一些更改。但我无法更改道具，所以我将其克隆到数据变量

mounted() {
  this.clonedUserInfo = {...this.user_info}
}

clonedUserInfo 是 Data 选项中的一个空对象。

但是当我更改 clonedUserInfo 时，我的 prop user_info 也会更改。

那么有什么方法可以从 Props 中阻止这种 Data 依赖？

顺便说一句，如果我克隆的不是 Props 而是 Vuex 状态变量 - 它可以很好地克隆而不更改基本状态变量。

标签： javascriptvue.jsvue-component

Answer 1

你是浅拷贝user_info。

如果您只有值，则只有 varsuser_info才能工作，否则您将更新原始值。

你需要深拷贝user_info。