Reasons and solutions for not being able to detect array changes in Vue2

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

• When setting an array item directly using an index, for example: vm.items[indexOfItem] = newValue
• When modifying the length of an array, for example: vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // not responsive vm.items.length = 2 // not responsive

Workaround

Manually add monitoring // Vue.set
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
Use the array mutation method, because Vue implements responsiveness for array mutation methods // Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Why can't I monitor changes in the two arrays in Vue2.0?

The official documentation briefly summarizes these two points as being impossible to implement "due to JavaScript limitations", and Object.defineProperty is a solution for detecting data changes. Does this limitation refer to Object.defineProperty?

In fact, the reason is not because of the vulnerability in Object.defineProperty(), but because of performance considerations. The performance of Object.defineProperty in an array is the same as that in an object. The index of the array can be regarded as the key in the object.

• When accessing or setting the value of the corresponding element by index, the getter and setter methods can be triggered
• Pushing or unshifting will increase the index. Newly added attributes need to be initialized manually before they can be observed.
• Deleting an element by pop or shift will delete and update the index, and will also trigger the setter and getter methods.
  

Therefore, Object.defineProperty has the ability to monitor array index changes, but vue2.x has abandoned this feature.

Source code analysis

Object.property can detect operations that change arrays through indexes, but Vue does not implement this. Then let's look at the source code:

Vue 3.0

In Vue 3.0, proxy is used instead of Object.defineProperty() to solve the existing problems.

The above is the detailed content of the reasons why array changes cannot be detected in Vue2 and the solution. For more information about Vue2 array changes, please pay attention to other related articles on 123WORDPRESS.COM!