Vue.js 当你在一个变量中存储一个 getter 时会发生奇怪的事情

Question

我是日本人，英语不好，抱歉。

这是一个非常简单的vue代码。

<template>

  <div id="app">

    <button @click.once="changeObj">

      Click

    </button>

  </div>

</template>

<script>

export default {

  data () {

    return {

      someObj: {

        someStrItem: 'str'

      }

    }

  },

  computed: {

    getObj () {

      return this.someObj

    }

  },

  methods: {

    changeObj () {

      const temp = this.getObj

      console.log(temp) // → { someStrItem: 'newStr' }

      this.someObj.someStrItem = 'newStr'

    }

  }

}

</script>

奇怪的是在 changeObj 函数内部。

我预计 console.log(temp) 的结果是

{ someStrItem: 'str' }

因为

this.someObj.someStrItem = 'newStr'

我这样做之后

  const temp = this.getObj

  console.log(temp)

但结果是

{ someStrItem: 'newStr' }

我不知道为什么会发生这种情况。

好吧，我实际上通常不会做这样的事情。

而且，我可以预料到会发生这种情况，因为我将返回对象的 getter 存储在变量中。

但我不知道原因。

为什么会发生这种情况？

Answer 1

为什么应该temp是{ someStrItem: '' }？让我们来看看发生的各个阶段：您的组件使用以下内容实例化data：{&nbsp; someObj: {&nbsp; &nbsp; someStrItem: 'str'&nbsp; }}getObj自动computed为{&nbsp; someStrItem: 'str'}当您调用console.log(temp)时changeObj，this.getObj仍然具有{&nbsp; someStrItem: 'str'}