Почему вычисляется изменение данных при назначении данных переменной? - PullRequest
Новая
       17

Почему вычисляется изменение данных при назначении данных переменной?

0 голосов
/ 25 декабря 2018

Я только что понял странное поведение Vue.js при использовании вычисляемых свойств.Может быть, я что-то упускаю, и это правильное поведение, но для меня это не имеет смысла.Если вы посмотрите на следующий код, который вы увидите внутри вычисляемого свойства, я создал новую переменную и назначил массив, определенный в «data».Затем я поместил некоторые новые данные во вновь созданную переменную.Теперь массив в «data» также изменился!Почему это так? 

new Vue({
  el: "#app",
  data: {
    items: ['foo', 'bar']
  },
  computed: {
    someComputed() {
      let some = this.items
      some.push('foobar')
      return some
    }
  }
})
<div id="app">
  {{ someComputed }} – {{ items }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Вы должны сделать копию этого с this.items.slice(0)

new Vue({
  el: "#app",
  data: {
    items: ['foo', 'bar']
  },
  computed: {
    someComputed() {
      let some = this.items.slice(0)
      some.push('foobar')
      return some
    }
  }
})
<div id="app">
  {{ someComputed }} – {{ items }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
0 голосов
/ 25 декабря 2018

Это потому, что «Call by Reference», вы просто ссылаетесь на массив из данных.Это как указатель, some и this.items указывают на один и тот же объект.
Если вам нужна копия this.items, вам нужно позвонить. 

let some = this.items.slice()

Таким образом, вы получаетесовершенно новый объект, а не просто новая «ссылка».
Обычно JS - это «Call by Value», но для объектов и массивов значение является ссылкой.
Правка:
Посмотрите на: Javascript передает массивы в функции по значению, оставляя исходный массив без изменений

...