Can Vue detect a change when it assigns a value directly to an array item?

Due to JavaScript limitations, Vue cannot detect the following array changes:

  • When you set an array item directly using an index, for example:vm.items[indexOfItem] = newValue

To solve this problem, Vue provides the following operations:

Vue. Set Vue. Set (vm.items, indexOfItem, newValue) // Vue. $set(vm.items, indexOfItem, newValue) // array.prototype.splice vM. items. Splice (indexOfItem, 1, newValue)Copy the code
  • When you modify the length of an array, for example:vm.items.length = newLength

To solve this problem, do the following:

// Array.prototype.splice
vm.items.splice(newLength)
Copy the code

Vue cannot detect array changes as element assignments because:

  • Dynamically added array items cannot be hijackedgetter.setter, so no response can be generated.
  • Hijacking each item in an array is inefficient and unwieldy

Vue can detect array changes by:

In fact, Vue overwrites the methods used to manipulate array items (pop, Push, Shifut, unshift, splice, sort, reverse), which change arrays