Vue中修改数组长度或数组内某个值时无法更新情况

---

前言-Vue中改变了数据页面却不刷新

最近刚开始实习，导师给的任务很简单，做某个Table行数据的删除。在清空整个data数组时，用到了两种方法

this.formData = [] // 直接用一个空数组覆盖
this.formData.length = [] // 设置length为0进行清空

但是这两种方式都是无法触发Vue中的响应，在Vue的官方文档中也有解释，并且推荐了解决方案为：使用set方法或splice方法。

---

原因

因为vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty()方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view。例如像数组的length熟悉是不能添加getter和setter，所有无法通过观察length来判断。

解决方案就是，需要我们主动通知vue。

翻阅Vue源码中的array.js（vue/src/core/observer/array.js）可以知道其重写了push、pop、shift、unshift、splice、sort、reverse这几个数组方法，只要我们使用这几个方法去操作数组，就会触发Vue中的数据响应，从而更新数组。

---

总结

如果某个数组数据需要双向绑定更新，那么每次操作时必须要用到上面提到的Vue中重写了的数组方法。
ps：多看看官方文档才是正解，很多问题搜不到或弄不懂，其实在官方文档里写的很清楚了。