1. vue2 responsive principle/principle of data binding
Vue will traverse all properties in data, and add getter and setter to each property through object.defindepropty.
Getters and setters enable Vue to track dependencies and notify changes when properties are modified.
Each component instance will have its own watcher instance, which will record the attributes used in component rendering as dependencies, and notify the watcher when the dependent data changes.
Thus his associated components will be updated.
Vue implements the principle of responsive data mainly through the combination of data hijacking (Data observation) and publish-subscribe mode (publish-subscribe mode).
When we define a data object in Vue, Vue will traverse the object, convert each property into getter and setter through the Object.defineProperty() method, and inject it into $data in the Vue instance, that is Implemented change monitoring for properties. In this way, when we change the data in data, the setter method will be triggered, and the Watcher object will also be notified, and the Watcher will notify the component, and the component will update the view.
The publish-subscribe model is mainly implemented through the Dep class. In the getter, Vue will instantiate a Dep object to collect Watcher objects. When the property is modified, it will notify all Watcher objects in the Dep to perform the update operation. In the setter, when the property is changed, all Watcher objects in the Dep will be notified to perform the update operation.
To sum up, the principle of Vue to implement responsive data is mainly to implement data hijacking through the Object.defineProperty() method, and at the same time implement the publish-subscribe mode through the Dep class and Watcher object