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：

{

  someObj: {

    someStrItem: 'str'

  }

}

getObj自动computed为

{

  someStrItem: 'str'

}

当您调用console.log(temp)时changeObj，this.getObj仍然具有

{

  someStrItem: 'str'

}