В Vue. js массив обновляется на веб-странице медленнее, чем обновление числа?

Question

Для следующего Vue кода:

let app = new Vue({
  el: "#app",
  data: {
    name: "Peter",
    a: 333,
    arr: [1, 3, 5]
  },
  methods: {
    changeNum() {
      this.a = Math.random();
    },
    changeArray() {
      // this.arr = [...this.arr]
      this.arr[1] = Math.random();
    }
  }
});

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

<div id="app">
  <div>{{ name }}</div>
  <div>{{ a }}</div>

  <div v-for="num in arr">{{num}}</div>

  <button v-on:click="changeNum">Change Number</button>
  <button v-on:click="changeArray">Change Array</button>
</div>

Есть две проблемы. Более незначительная проблема: при нажатии на «Изменить массив» число не отображается на экране. Нужно помочь, нажав кнопку «Изменить номер».

Почему это так. Эту проблему можно решить с помощью this.arr = [...this.arr] в changeArray(), но это создает новый массив, и это не всегда желательно:

let app = new Vue({
  el: "#app",
  data: {
    name: "Peter",
    a: 333,
    arr: [1, 3, 5]
  },
  methods: {
    changeNum() {
      this.a = Math.random();
    },
    changeArray() {
      this.arr = [...this.arr]
      this.arr[1] = Math.random();
    }
  }
});

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

<div id="app">
  <div>{{ name }}</div>
  <div>{{ a }}</div>

  <div v-for="num in arr">{{num}}</div>

  <button v-on:click="changeNum">Change Number</button>
  <button v-on:click="changeArray">Change Array</button>
</div>

Более важная проблема: я могу сделать все в одном файле HTML, а затем в консоли разработчика Goggle Chrome можно набрать

app.a = 123;

и попробовать другие цифры, и обновление будет быстрым.

Но если я наберу

app.arr[1] = 456789;

, оно также обновляется на веб-странице, но это немного медленно Мне даже не нужно делать что-то вроде this.arr = [...this.arr], но оно все равно будет обновляться на странице, и я удивляюсь, почему.

Смежный вопрос: почему это медленнее? Разве оба app.a = 123 и app.arr[1] = 456789 не выполняются JS Proxy / setter, и поэтому они должны вести себя одинаково? Я проверил, используя Object.getOwnPropertyDescriptor(app, "arr"), и вижу, что и a, и arr имеют функции set и get, поэтому теоретически они должны работать одинаково, и поэтому обновление на веб-странице должно быть одинаково fast?

PS У меня также было setInterval() для переключения между 2 изображениями каждую 1 секунду с использованием <img :src="filename"> в качестве эксперимента в коде, и я подумал, что это не должно было повлиять на массив. Но оказалось, что если я закомментировал setInterval(), то массив на странице не обновляется.

Answer 1

В соответствии с Vue документами:

1. Готч для начинающих
2. Предостережения при отображении списка
3. Реактивность по глубине

Я редактировал, чтобы проверить ваше предположение, что редактирование числа происходит быстрее, чем редактирование элемента массива путем вычитания объектов даты, созданных до и после каждой операции, и кажется, что оба занимают одинаковое количество времени. Просто проверьте консоль.

let app = new Vue({
  el: "#app",
  data: {
    name: "Peter",
    a: 333,
    arr: [1, 3, 5]
  },
  methods: {
    changeNum() {
      const before = new Date();
      this.a = Math.random();
      const after = new Date();
      console.log(after - before);
    },
    changeArray() {
      const before = new Date();
      this.$set(this.arr, 1, Math.random());
      const after = new Date();
      console.log(after - before);
    }
  }
});

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

<div id="app">
  <div>{{ name }}</div>
  <div>{{ a }}</div>

  <div v-for="num in arr">{{num}}</div>

  <button v-on:click="changeNum">Change Number</button>
  <button v-on:click="changeArray">Change Array</button>
</div>