The data responsive principles of Vue2 and Vue3 are quite different.
The data responsive principle of vue2 mainly uses the getter and setter methods of object.defineProperty() to convert all properties into getter/setter forms, and trigger the update function when the property is accessed or modified. This approach is to automatically update the DOM by tracking changes in JavaScript objects. However, this method also has some limitations. It is more troublesome to operate nested hierarchical data, and it will also affect certain performance.
Vue3 uses the proxy proxy object introduced by ES6 as a means of data hijacking. The proxy can monitor any changes in the object, and it does not need to monitor the entire object, just specify the key. At the same time, symbol is also used as a built-in function to identify the object type, which can better display the "non-extensible" behavior. This new method is very flexible and efficient, accelerates the efficiency of object access and modification, and is not limited to the number of object attributes. And it can also accurately monitor the array data
In terms of use, vue2 configures the data in the component template based on the global options API (data, props, watch, etc.), and vue3 separates the data logic based on the setup() function to facilitate the use of combined APIs
In general, the responsive principle of vue3 is more flexible and high-performance than vue2