Menu
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?
861
Deleting elements in an array maintains reactivity in Vue when done right. These arrays can be local variables in a component, or state variables in Vuex - the behaviour is the same. We just use the standard pop and shift to delete elements in the array.
Vue's reactivity system works by deeply converting plain JavaScript objects into reactive proxies. The deep conversion can be unnecessary or sometimes unwanted when integrating with external state management systems (e.g. if an external solution also uses Proxies).
Use single file components if you can. If you come from React you can also find jsx for Vue useful, or even write render function by hand (though not recommended). If you want to totally nullify the time of the first rendering though, the only way to go is to do server-side rendering.
Like objects, arrays are reactive and are observed for changes. Also like objects, arrays have caveats for manipulation. Vue wraps array methods like push, splice etc so they will also trigger view updates.
Replace the array with a new array. This is the fastest way to clear an array, but requires that you don't have references to the original array elsewhere in your code. [1] For example, let's say your array looks like this: let a = [1,2,3];. To assign a to a new empty array, you'd use: Set the length property to zero.
All the below things applicable to Vue 2 btw. As you can see, the first button makes changes to the array nums and those changes are immediately available on button click. The second button does not seemingly make any changes. However, you will see from the console statement in developer tools that the array has indeed changed.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
