Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to solve array changes that can not be detected in Vue2. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Solution method

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

When setting an array item directly using the 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: ['await,' baked,'c']}}) vm.items [1] ='x' / / non-responsive vm.items.length = 2 / / non-responsive solution manually add monitoring / / Vue.setVue.set (vm.items, indexOfItem, newValue) vm.$set (vm.items, indexOfItem, newValue) using array variation Because vue's array variation method implements responsive / / Array.prototype.splicevm.items.splice (indexOfItem, 1, newValue), why can't the changes of two kinds of arrays be monitored in Vue2.0?

Both of these points are briefly summarized in the official documents as "cannot be achieved due to JavaScript limitations", and Object.defineProperty is a solution to detect data changes, does this limitation refer to Object.defineProperty?

The reason is not because there is a vulnerability in Object.defineProperty (), but because of performance issues. The performance of Object.defineProperty in the array is consistent with that in the object, and the index of the array can be thought of as the key in the object.

The getter and setter methods can be triggered when the value of the corresponding element is accessed or set through the index

Indexes are added through push or unshift, and the newly added attributes need to be manually initialized before they can be observe.

Deleting an element through pop or shift deletes and updates the index and triggers the setter and getter methods.

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

Source code analysis

Object.property can detect the operation of changing the array by index, but Vue does not. Let's take a look at the source code:

Vue3.0

In Vue3.0, proxy is used instead of Object.defineProperty () to solve its problems.

These are all the contents of the article "how to solve array changes that cannot be detected in Vue2". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.