VueJS中更新数据的机制？

【问题标题】：Mechanism of updating data in VueJS?VueJS中更新数据的机制？
【发布时间】：2020-07-27 06:36:37
【问题描述】：

<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也会改变。

但我认为它们之间没有任何关系。

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

【问题讨论】：

如果你执行udpateData，你将一个对象分配给this.dataTemp。你期望什么

标签： javascript vue.js ecmascript-6

【解决方案1】：

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

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

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

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

【讨论】：