We often use the two-way binding vue, changing a property value of the data, vue immediately help us to automatically update the view, let's look at the principle.
Responsive principle of Object:
You can see that, in fact, the core is to have all the attributes of the object plus getter, setter, collected get a dependent, dependent upon notification set, to achieve the purpose responsive update.
But the obvious, this method does not monitor data to increase property and delete attributes action
Array of Responsive principle:
We can see the array and object similar principle, but because in most cases are not set, but some of the methods of operation of the array (push, pull, shift ...), so we add a layer of interceptors to inform Dep.
If the array elements inside it is of type object, just like the above object is achieved in types turn responsive Observer
However, this design defects are also evident, it is to directly modify the elements (array [0] = 123), the direct operation of such an operation array.length, vue is not overheard.
In order to repair the above-mentioned defects, vue3 proxy will be used to rewrite the observer.