背景

1. Vue不能檢測物件屬性的新增、刪除

2. Vue不能檢測陣列項的賦值修改（根據index）、length的修改

物件 

1. $set、set、$delete、delete

// $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. assign

this.obj = Object.assign({}, this.obj, {k: v})

陣列

1. $set、set、$delete、delete

    與物件的第一種方式用法相同，知識將 物件 換成 陣列，將 鍵(k) 換成 下標(index)

2. 使用陣列的操作函式（其實已被Vue進行了修改）

    splice(),

    push(), pop(),

    shift(), unshift(),

    sort(), reverse()

難點（坑）：

1. 根據vue生命週期，可以在beforeCreate和created中用 '=' 來對陣列/物件初始化（非同步

2. 不能直接修改data根目錄（data下第一層）的屬性（階段： created之後，下面情況也是建立在此階段下）

3. 對於物件、陣列進行set時，value可以為複雜的資料結構，vue會將其都轉為reactive的資料，舉例如下：

this.$set(this.texts, 0, [
  [1,2],
  [3,4],
  {name: 'XiaoMing'}
])

4. 繫結陣列中資料時，需要注意index獲取元素的方式與其他方式的差別，舉例如下（item、雙目運算子的返回值為值型別，非引用型別，與texts[index]不同，不可用來作為資料來源）：

// texts: [1,2,3]

// 錯誤, item ≠ texts[index]
<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]">
// 正確，需要判斷時，可以使用 && || 取代雙目運算子（有坑...） 或者 使用v-if
<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]">

5. 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
    }
}

歡迎關注、點贊