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

【问题标题】：Vue.js - Clearing an array content and reactivity issuesVue.js - 清除数组内容和反应性问题
【发布时间】：2020-01-10 01:29:11
【问题描述】：

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

array = [];

因为如果在某个地方引用了该数组，则该引用未更新或类似的地方。

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

反正javascript已经更新了，还有一个叫Vue.js的框架

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

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

【问题讨论】：

vue.js 还是坏了
尝试先学习javascript而不是学习vuejs
好吧，反应更糟糕！
对该主题缺乏理解或知识并不意味着它一定会被破坏。

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案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>

【讨论】：

【解决方案2】：

Vue 无法检测到数组的以下更改：当您直接使用索引设置项目，例如vm.items[indexOfItem] = newValue 什么时候您修改数组的长度，例如vm.items.length = newLength

来自：https://vuejs.org/v2/guide/reactivity.html#For-Arrays

所以，清理一个反应式数组：

yourArray.splice(0)

【讨论】：