Vue.js Странная вещь происходит, когда вы храните геттер в переменной - PullRequest
Новая
       12

Vue.js Странная вещь происходит, когда вы храните геттер в переменной

0 голосов
/ 24 октября 2019

Я японец и плохо знаю английский, извините.

Это очень простой код 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' }

Я не знаю, почему это происходит.

Ну, на самом деле я обычно так не делаю.

И я могуожидайте, что это произойдет, потому что я храню геттер, который возвращает объект в переменной.

Но я не знаю причину.

Почему это происходит?

1 Ответ

2 голосов
/ 24 октября 2019

Почему temp должно быть { someStrItem: '' }?

Давайте пройдемся по этапам вхождений:

  1. Ваш компонент создается с data: 
{
  someObj: {
    someStrItem: 'str'
  }
}
getObj автоматически computed как 
{
  someStrItem: 'str'
}
Когда вы звоните console.log(temp) в changeObj, this.getObj по-прежнему имеет значение 
{
  someStrItem: 'str'
}
...