Why can't Vue detect array changes?

Vue detects changes in data through Object.defineProperty, so it"s understandable that you can"t listen for array additions, because this detection binding operation has already been done for all properties in the constructor.
but the official text: due to the limitation of JavaScript, Vue cannot detect the following changing arrays:
when you set an item directly using the index, for example: vm.items [indexOfItem] = newValue
when you modify the length of the array, for example: vm.items.length = newLength

What does this sentence mean? I tested that Object.defineProperty can set the accessor properties of properties by indexing properties, so why can"t you listen?
some people on the forum said that because the length of the array is variable, even if the length is 5, but there may not be index 4, I just want to ask where this answer comes from. The new element that modifies length, will be added to the last, its value is undefined, through the index can also get their value, how is it called "may not have index 4"?

now that you know why the length of the array can"t traverse all the elements and add all set and get through the index attribute, can"t you update the view at the same time?
if you have to say it, considering the performance problem, assuming that the element content has only four meaningful values, but the length is really 1000, it is impossible for us to detect 1000 elements. But the official said that due to JS restrictions, I would like to know what this restriction is? Thank you very much for helping me solve this problem.

Vue.js node.js javascript
Apr.01,2021

I recently wrote Vue's Observer partial source analysis blog
forced a wave of answers.

this is not to say that JS cannot support responsive arrays. There is no such restriction, but there is a difference between the way the average developer uses arrays and objects. Arrays are often used in JS as the implementation of data structures such as stacks, queues, collections, etc., which store batches of data to be traversed. And runtime optimizes objects and arrays differently.

so array processing needs to be specialized to improve performance.

Vue is responsive by setting getter/setter for each key. Developers use arrays, often for traversal, so it is too expensive to call getter, so Vue does not set on each key of the array, but defines _ _ ob__ on the array, and replaces push and other prototype methods that can affect the original array.

as for length, you can get the names of all keys by using Object.keys () or Object.getOwnPropertyNames (), the former is all enumerable and the latter is all own and does not need to use length.

it is clear from the source code that Vue skips the process of setting a response to each key of the array, but recursively sets the response to the value

Previous: Bewilderment about js, ask for an explanation

Next: How to switch tags at the top of Mini Program

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu