在 Vue.js 中，当你把一个普通的 JavaScript 数组用在 Vue 实例的 data 函数中返回的对象里时，Vue 会使得这个数组变得“响应式”，即当数组的内容变化时，视图也会相应地更新。然而，Vue 对数组的响应式处理有一些特定的限制和注意事项。
限制
1.直接通过索引修改数组元素
- Vue 无法检测到直接通过索引修改数组元素的变化，例如
array[index] = newValue。因为 Vue 依赖于 JavaScript的Object.defineProperty实现响应式，并且无法拦截此类操作。
2.直接修改数组长度
- Vue 也无法检测到直接修改数组长度的变化例如
array.length = newLength
解决方法
为了解决响应式数组的变化，Vue提供了一些特殊方法来修改数组，以确保变更能够被观察到并触发视图更新。
1.使用$set方法
- Vue提供$set实例方法，用于向已经被观察的数组中添加新元素，确保新元素是响应式的。
const arr = [1,2,3,4] //定义原始数组
this.$set(arr,4,5)//向数组中添加新元素,并确定新元素是响应式的
console.log(arr) //[1,2,3,4,5]
2.使用数组的splice方法
- splice方法会改变原始数组，因此可以检测到这种变化，可以使用splice方法来添加、删除或替换数组中的元素。
const arr = [1,2,3] //原始数组
arr.splice(0,1,4) //使用splice方法替换数组的第一个元素
console.log(arr) //[4,2,3]
3.使用push、pop、shift、unshift、sort、reverse等数组方法
- 这些方法都是可以改变原数组的，因此Vue可以检测到这些变化并触发视图的更新。
4.使用$forceUpdate方法
- 使用Vue.js的
this.$forceUpdate()方法来强制更新视图。例如，你正在使用某个库或第三方代码，该代码直接修改了数组,在这种情况下,需要使用this.$forceUpdate()来强制更新视图。但是，这种方法应该谨慎使用，因为它会跳过Vue的响应式系统，直接强制更新 DOM。这可能会导致一些性能问题和意外的副作用。
