时间戳

首页 > 解决方案 > Vue.js 将 getter 存储在变量中时会发生奇怪的事情

javascript - Vue.js 将 getter 存储在变量中时会发生奇怪的事情

问题描述

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

这是一个非常简单的 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 存储在 variable 中。

但我不知道原因。

为什么会发生这种情况？

标签： javascriptnode.jstypescriptvue.jsgetter

解决方案

为什么应该temp永远是{ someStrItem: '' }？

让我们来看看发生的阶段：

  1. 您的组件被实例化为data：
{
  someObj: {
    someStrItem: 'str'
  }
}
  1. getObj自动computed为
{
  someStrItem: 'str'
}
  1. 当你打电话console.log(temp)时changeObj，this.getObj仍然有价值
{
  someStrItem: 'str'
}

推荐阅读