Vue修改數組沒有響應式更新

由於 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");