javascript - 防止 prop 覆盖数据

Question

我是 vue.js 的新手，正在努力应对以下情况。我通过 Prop 将一个充满对象的数组发送到我的路由器 View 。

在我的一个路由器 View 组件中，我在多个函数中使用了这个数组，用“this.data”引用它，并将它保存在一个新变量的函数中，这样我就不会覆盖实际的 prop 数据。

但是函数会覆盖原始 Prop 数据并操纵 Prop 的数据。

这是我的问题的抽象示例:

App.vue

<template>
  <div>
    <router-view :data='data'></router-view>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      data: [],
    };
  },

  created: function() {
    this.getData();
  },

  methods: {
    getData: function() {
      this.data = // array of objects
    },
  }

路由组件:

<script>
export default {

  props: {
    data: Array,
  },

  data: function() {
    return {
      newData1 = [],
      newData2 = [],
    }
  }

  created: function() {
    this.useData1();
    this.useData2();
  },

  methods: {
    useData1: function() {
      let localData = this.data;
      // do something with 'localData'
      this.newData1 = localData;
    }

    useData2: function() {
      let localData = this.data;
      // do something with 'localData'
      this.newData2 = localData;
    }
  }
}
</script>

useData2 中的“localData”是根据 useData1 中的更改进行操作的，因此我不会覆盖数据属性。

为什么我要覆盖 prop 以及如何防止它？

Answer 1

您遇到的问题是通过引用而不是值复制 this.data 的副作用。

解决方案是使用一种通常称为克隆的技术。通常可以使用 spread syntax 克隆数组或 Array.from() .

请参阅下面的实际示例。

// Methods.
methods: {

  // Use Data 1.
  useData1: function() {
    this.newData1 = [...this.data]
  },

  // Use Data 2.
  useData2: function() {
    this.newData2 = Array.from(this.data)
  }

}