Следующий код иногда добавляет число в массив, а иногда нет (добавляет только при Math.random() > 0.5
), но всегда добавляет число к набору и устанавливает число на карте:
Я заметил array.add()
"трансформируется" в Vue. js, но aSet.add()
нет, как напечатано в console.log()
(сначала сохраняя ссылку на исходную функцию и сравнивая ее позже. Сначала я сохранил это свойство window
, но я заметил, что Vue. js, кажется, стирает его, поэтому я сохраняю его в window.navigator
).
Числа обновляются только на экране, когда массив имеет array.push()
.
Итак Vue. js
- Изменяет все методы экземпляра массива, чтобы он помечал массив как грязный?
- Но для набора или карты методы экземпляра не будут помечать себя грязными?
- Как это сделать для объекта набора или карты?
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>