vue(2.x) 响应式修改数据（对象、数组）__vue修改数组对象的值

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

年轻有为的茴香 · Thymeleaf中th:text=“${m ...· 7 月前 ·

痴情的帽子 · 中国医学科学院北京协和医学院· 10 月前 ·

温暖的遥控器 · ASP.NET Core 中文文档第四章 ...· 12 月前 ·

没读研的火柴 · 【python】使用滑动条调整图片亮度和饱和 ...· 1 年前 ·

霸气的胡萝卜 · 图文-德国VS美国 ...· 1 年前 ·

vue(2.x) 响应式修改数据（对象、数组）

背景

Vue不能检测对象属性的添加、删除（仅此而已，可直接对该对象重新赋值、修改该对象或内层对象的属性）
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. 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
    }
}

复制代码