2019-08-18 Updated: 2019-08-20

Author: Ghost girl

Note: This article reprinted vue(2.x) responsive modification data (objects, arrays) and difficulties (pits), for reference only

Status: Completed, to be added 2019-08-20

It is recommended that we first look at the reactive principle for the best explanation of VUE responsive data

background

1. Vue cannot detect the addition or deletion of object attributes (that’s all, you can directly reassign and modify the attributes of the object or inner objects)

2. Vue cannot detect array item changes (based on index), length changes (that’s all, can directly reassign arrays, such as filter, map, concat, slice, etc.)

object

1. $set,set,$delete,delete

   // $set is an alias for vue. set
   this.$set(this.obj, k, v)
   Vue.set(this.obj, k, v)
    
   this. $delete(this.obj, k)
   Vue.delete(this.obj, k)
Copy the code

Sometimes you may need to assign multiple new attributes to existing objects, such as object.assign () or _.extend(). However, new attributes that are thus added to the object do not trigger updates. In this case, you should create a new object with the properties of the original object mixed in.

// Replace 'object. assign(this.someObject, {a: 1, b: 2})'
this.someObject = Object.assign({}, this.someObject, { a: 1.b: 2 })

Copy the code

An array of

1. $set,set,$delete,delete

Same as the first way of using objects, except that the object is an array, and the key (k) is index.

2. Use array manipulation functions (actually modified by Vue)

• splice(),

• push(), pop(),

• shift(), unshift(),

• sort(), reverse()

3. Copy an Array

• Array. The from (), etc

Difficulties (pits) :

1. You cannot add undefined attributes to vUE instances or VUE components (this, this.$data)

2. When an object or array is set, value can be a complex data structure, and VUE will recurse to reactive data, as shown below:

this.$set(this.texts, 0The [[1.2],
  [3.4] and {name: 'XiaoMing'}])Copy the code

3. V – model binding data needed for LHS, but not for RHS (item, &&, | |, = (,), binocular operators return LHS), for example, is as follows:

/ / texts: [1, 2, 3]
Copy the code

// error, item is RHS

<input v-for="(item, index) in texts" :key="index" v-model="item">
Copy the code

/ / error

<input v-for="(item, index) in texts" :key="index" v-model="1 > 0? texts[index] : codes[index]">
Copy the code

/ / error

<input v-for="(item, index) in texts" :key="index" v-model="(1 > 0 && texts[index]) || codes[index]">
Copy the code

correct

<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]">
Copy the code

correct

<input v-for="(item, index) in texts" :key="index" v-model="texts[index]">
Copy the code

4. For computed data, it is necessary to bind data (or attributes of objects or items of arrays) in a data; otherwise, it cannot be updated in a responsive manner.

computed: {
 
    / / error
    prop () {
      if(!this.obj.data) return {}
      return this.obj.data
    }
 
    // True, use vue. set or object. assign
    prop () {
      if(!this.obj.data) this.$set(this.obj, data, {}})
      return this.obj.data
    }
 
    / / error
    prop () {
      if(!this.obj.arr) return []
      return this.obj.arr
    }
 
    / / right
    prop () {
      if(!this.obj.arr) this.$set(this.obj, arr, []})
      return this.obj.arr
    }
}

Copy the code

Reference:

• Vue (2.x) Responsive modification of data (objects, arrays) and difficulties (pits)