vue(2.x) 響應式修改數據（對象、數組）
編寫時間：2019-08-18
更新時間：2019-08-20作者：鬼小妞
備注： 本文
轉載了vue(2.x) 響應式修改數據（對象、數組）及難點（坑），僅供參考狀態：
已完成、待補充2019-08-20
建議先看一下響應式原理關於VUE響應式數據的最佳解釋
背景
-
Vue不能檢測對象屬性的添加、刪除（僅此而已，可直接對該對象重新賦值、修改該對象或內層對象的屬性）
-
Vue不能檢測數組的項修改（根據index）、length修改（僅此而已，可直接對數組重新賦值，如使用filter、map、concat、slice等方式生成新數組對其賦值）
對象
// $set是Vue.set的別名 this.$set(this.obj, k, v) Vue.set(this.obj, k, v) this.$delete(this.obj, k) Vue.delete(this.obj, k) 復制代碼2. Object.assign() 有時你可能需要為已有對象賦值多個新屬性，比如使用 Object.assign() 或 _.extend()。但是，這樣添加到對象上的新屬性不會觸發更新。在這種情況下，你應該用原對象與要混合進去的對象的屬性一起創建一個新的對象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 復制代碼數組
1. $set、set、$delete、delete
與對象的第一種方式用法相同，只是將 對象 換成 數組，將 鍵(k) 換成 下標(index)
2. 使用數組的操作函數（其實已被Vue進行了修改）
-
splice(), -
push(),pop(), -
shift(),unshift(), -
sort(),reverse()
3. Array拷貝
- Array.from()等
難點（坑）：
1. 不能向vue實例或vue組件(this、this.$data)添加未定義的屬性
2. 對於對象、數組進行set時，value可以為復雜的數據結構，vue會進行遞歸從而將其都轉為reactive的數據，舉例如下：
this.$set(this.texts, 0, [ [1,2], [3,4], {name: 'XiaoMing'} ]) 復制代碼3. v-model綁定的數據需要為 LHS，而不能為 RHS（item及&&、||、=、(,)、雙目等運算符返回LHS），舉例如下：
// texts: [1,2,3] 復制代碼// 錯誤, item為RHS
<input v-for="(item, index) in texts" :key="index" v-model="item"> 復制代碼// 錯誤
<input v-for="(item, index) in texts" :key="index" v-model="1 > 0 ? texts[index] : codes[index]"> 復制代碼// 錯誤
<input v-for="(item, index) in texts" :key="index" v-model="(1 > 0 && texts[index]) || codes[index]"> 復制代碼正確
<input v-for="(item, index) in texts" :key="index" v-if="1>0" v-model="texts[index])"> <input v-for="(item, index) in texts" :key="index" v-if="1<0" v-model="codes[index]"> 復制代碼正確
<input v-for="(item, index) in texts" :key="index" v-model="texts[index]"> 復制代碼4. computed必須綁定一個data中的數據（或對象的屬性、數組的項），否則無法響應式更新，尤其注意綁定初始不存在的數據時，舉例如下：
computed: {
// 錯誤 prop () { if(!this.obj.data) return {} return this.obj.data } // 正確，使用Vue.set或Object.assign亦可 prop () { if(!this.obj.data) this.$set(this.obj, data, {}}) return this.obj.data } // 錯誤 prop () { if(!this.obj.arr) return [] return this.obj.arr } // 正確 prop () { if(!this.obj.arr) this.$set(this.obj, arr, []}) return this.obj.arr } } 復制代碼參考：