vue(2.x) 響應式修改數據（對象、數組）及難點（坑）

背景

1. Vue不能檢測對象屬性的添加、刪除（僅此而已，可直接對該對象重新賦值、修改該對象或內層對象的屬性）

2. Vue不能檢測數組的項修改（根據index）、length修改（僅此而已，可直接對數組重新賦值，如使用filter、map、concat、slice等方式生成新數組對其賦值）

 

對象 

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

 

數組

1. $set、set、$delete、delete

    與對象的第一種方式用法相同，只是將 對象 換成 數組，將 鍵(k) 換成 下標(index)

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

    splice(),

    push(), pop(),

    shift(), unshift(),

    sort(), reverse()

 

難點（坑）：

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及&&、||、=、(,)、雙目等運算符返回RHS），舉例如下：

// 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
    }
}

 

歡迎關注、點贊