Vue. js меняет методы экземпляра массива, а не набор или карту? - PullRequest
0 голосов
/ 07 февраля 2020

Следующий код иногда добавляет число в массив, а иногда нет (добавляет только при Math.random() > 0.5), но всегда добавляет число к набору и устанавливает число на карте:

Я заметил array.add() "трансформируется" в Vue. js, но aSet.add() нет, как напечатано в console.log() (сначала сохраняя ссылку на исходную функцию и сравнивая ее позже. Сначала я сохранил это свойство window, но я заметил, что Vue. js, кажется, стирает его, поэтому я сохраняю его в window.navigator).

Числа обновляются только на экране, когда массив имеет array.push().

Итак Vue. js

  1. Изменяет все методы экземпляра массива, чтобы он помечал массив как грязный?
  2. Но для набора или карты методы экземпляра не будут помечать себя грязными?
  3. Как это сделать для объекта набора или карты?

let app = new Vue({
  el: "#app",
  data: {
    arr: [1, 3, 5],
    aSet: new Set([2, 3, 6]),
    aMap: new Map([
      ["a", 123],
      ["b", 234]
    ]),
  },
  methods: {
    checkIt() {
      if (Math.random() > 0.5) {
        console.log("Adding to array");
        this.arr.push(Math.floor(Math.random() * 1000));
      }
      this.aSet.add(Math.floor(Math.random() * 1000));
      this.aMap.set("c", Math.floor(Math.random() * 1000));

      console.log(window.navigator.originalArrayPush === [].push);
      console.log(window.navigator.originalArrayPush === this.arr.push);
      console.log(window.navigator.originalSetAdd === (new Set()).add);
      console.log(window.navigator.originalSetAdd === this.aSet.add);
    }
  }
})
li {
  display: inline;
  padding: 0 .3em
}
<script>
  window.navigator.originalArrayPush = [].push;
  window.navigator.originalSetAdd = (new Set()).add;
</script>

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

<div id="app">
  <button @click="checkIt">Add and Check</button>
  
  <ul>
    <li v-for="num in arr">{{num}}</li>
  </ul>
  <ul>
    <li v-for="num in aSet.values()">{{num}}</li>
  </ul>
  <ul>
    <li v-for="num in aMap.values()">{{num}}</li>
  </ul>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...