javascript - VueJS中更新数据的机制？

Question

<script>
export default {
  data() {
    return {
      data: {},
      dataTemp: {}
    }
  },
  methods: {
    updateData() {
      let queries = { ...this.$route.query }
      this.data = {
        ...this.data,
        pID: queries.pid,
        sID: queries.sid
      }
      this.dataTemp = {
        ...this.dataTemp,
        pID: queries.pid,
        sID: queries.sid
      }
    }
  }
}
</script>

在上面的示例中，当我更新 this.data 时，this.dataTemp 也会发生变化。

但我认为这彼此无关。

请向我解释这个问题。谢谢！

标签： javascriptvue.jsecmascript-6

Answer 1

data这会将和的初始值设置dataTemp为空对象。请注意，尽管它们都是不同的对象 - data !== dataTemp。

data() {
  return {
    data: {},
    dataTemp: {}
  }
}

如果有人打电话this.updateData()，两者都会改变，因为我们同时分配了dataand dataTemp。如果您只想更新data，您可以将方法更改为

updateData() {
  let queries = { ...this.$route.query }
  this.data = {
    ...this.data,
    pID: queries.pid,
    sID: queries.sid
  }
}