# Vue无法检测变化的数组操作
今天遇到了一个问题，当我试图更改 Vue 数据项中的数组中的项时，发现试图没有变化。
const vm = new Vue({
data: {
arr: [1, 2, 3]
}
});
vm.arr[0] = -1;
1
2
3
4
5
6
2
3
4
5
6
# 原因
查阅资料得知 由于 JavaScript 的限制，Vue 不能检测到以下数组/对象的变动：
- 通过索引直接设置一个数组项时，例如：
vm.arr[index] = newValue - 修改数组的长度时，例如：
vm.arr.length = newLength
# 解决方案
1. 解决第一类情况 Vue.set() 点击传送门
// Vue.set
Vue.set(vm.arr, index, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.arr, index, newValue)
// Array.prototype.splice
vm.items.splice(index, 1, newValue)
1
2
3
4
5
6
2
3
4
5
6
2. 解决第二类情况
// Array.prototype.splice
vm.items.splice(newLength)
1
2
2