vue 响应式修改数据（对象、数组）及难点（坑）

背景

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中用 '=' 来对数组/对象初始化（异步初始化亦可），因为reactive还没有初始化

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

欢迎关注、点赞

vue 响应式修改数据（对象、数组）及难点（坑）

猜你喜欢