为什么在 vue 中直接修改数组的 length 属性或者直接修改数组中的某个值,无法更新视图。
因为在 vue 源码中,只针对数组的方法做了额外的响应式处理,如push、pop、shift、unshift、splice、sort、reverse等方法,并没有针对数组的属性做相应的响应式处理。
所以:
vm.arr.push(100); 为响应式
vm.arr[0]=100; 非响应式
vm.arr.length=0; 非响应式
那么后面的两种需要改成响应式的话,该怎么处理呢?如下:
vm.arr.splice(0,1,100); 为响应式;从索引为0的地方开始删除一位,并修改为100,等同于 vm.$set(vm.arr, 0, 100);
vm.arr.splice(0); 为响应式;清空从第0位开始后面的所有数据。