修改Vue数组没有响应式更新

Posted 2021-03-15 bushui

由于 javascript 的限制，Vue 不能检测以下数组的变动：

（1）当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

（2）当你修改数组的长度时，例如：vm.items.length = newLength

 

为了解决第一类问题，我列出了可以响应式更新的方法：

（1）push：在数组后面添加数据

this.list.push("Thinkphp");
//还可以添加多个
this.list.push("ThinkPHP","node","Typescript");

注：push(...items)，可以添加多个

（2）unshift：在数组前面添加数据

this.list.unshift("ThinkPHP");

注：unshift(...items)，可以添加多个

（3）pop：删除数组中最后一个元素

this.list.pop();

（4）shift：删除数组中第一个元素

this.list.shift();

（5）splice：删除元素 / 插入元素 / 替换元素

语法结构：splice（start，length，value）；

//替换下标0的，数量1个，值是php7.2
this.list.splice(0,1,"PHP7.2");

//删除下标0的，数量1个
this.list.splice(0,1);

//新增在下标0的，数量0个，值是PHP7.2
this.list.splice(0,0,"PHP7.2");

注：替换或新增就取决于第二个参数，0新增，1替换；还有第三个value是...item，可以有多个

（6）Vue.set

语法结构：set（"要修改的对象"，索引值，修改后的值）；

//修改对象，下标，修改后的值
Vue.set(this.list,0,"Vue2.0");