使用 Vue.js 清除数组内容和反应性问题

Question

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?

Answer 1

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>

Answer 2

Vue cannot detect the following changes to an array: When you directly set an item with the index, eg vm.items[indexOfItem] = newValue When you modify the length of the array, eg vm.items.length = newLength

From: Reactivity in Depth, For Arrays

So, cleaning a reactive array:

yourArray.splice(0)