A few years ago it was bad practice to do
array = [];
because if the array was referenced somewhere that reference wasn't updated or something like that.
The correct way was supposed to be array.length = 0;
Anyway, JavaScript has been updated now, and there's a framework called Vue.js
Vue does not catch array.length = 0; so the property won't be reactive. But it does catch array = [];
Can we use array = []; now, or is JavaScript still broken?
Doing something like myArray.splice(0) will clear the content of the array and that will also be reactive:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
items: ["a", "b", "c"]
}
},
methods: {
flush() {
this.items.splice(0);
}
}
});<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div v-for="i in items">{{i}}</div>
<button @click="flush"> flush</button>
</div>Vue cannot detect the following changes to an array: When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue When you modify the length of the array, e.g. vm.items.length = newLength
From: Reactivity in Depth, For Arrays
So, cleaning a reactive array:
yourArray.splice(0)
