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 复制代码

    参考: