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

Question

所以几年前这是不好的做法

array = [];

因为如果数组在某处被引用，该引用没有更新或类似的东西。

正确的方法应该是 array.length = 0;

反正现在javascript已经更新了，有个框架叫Vue.js

Vue 不会捕获， array.length = 0;因此该属性不会是响应式的。但它确实抓住了array = [];

我的问题是，我们现在可以使用 array = [];，还是 javascript 仍然损坏？

Answer 1

做类似的事情myArray.splice(0)将清除数组的内容，这也将是反应性的：

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 无法检测到数组的以下更改： 当您直接使用索引设置项目时，例如 vm.items[indexOfItem] = newValue 当您修改数组的长度时，例如 vm.items.length = newLength

来自：深度反应性，对于数组

因此，清理反应式阵列：

yourArray.splice(0)