Model is responsible for representing JavaScript objects, and View is responsible for UI interface display, and the two are separated to the greatest extent.
It is the view model that connects the model with the view. ViewModel is responsible for synchronizing the model data into the view for display, and also for synchronizing the interface modification of the view back to the model update data.
Dirty value check: angular.js compares whether the data has changed through dirty value check, and decides whether to update the view.
The principle is that when a copy of copy_viewModel is stored in memory, when the user's operation causes the viewModel to change, the framework will deeply compare Copy _ viewModel with the latest viewModel, and once the attribute changes, the DOM node bound to it will be re-rendered.
The simplest method is to detect data changes through periodic polling by setInterval (), and enter dirty value detection when the angle is triggered. However, only specified events (such as user click, input operation, ajax request, setInterval, setTimeout, etc ...) are allowed, otherwise you need to manually call the apply function to force the dirty check.
Data hijacking: vue.js adopts the method of data hijacking combined with publisher-subscriber mode, and hijacks setters of various properties through Object.defineProperty (). When the data changes, the getter issues a message to the subscriber, triggering the corresponding monitoring callback, thus updating the data and views.
The schematic diagram tells us that data attributes define getter and setter to hijack attributes. When the attribute value changes, the watch object will be notified, and the watch object will trigger the component rendering function again, and then update the DOM node tree on the view.
On the other hand, when data is input on the view, it will also trigger data changes and subscriber observation updates, so that the model data can update the data changes on the view in real time. This process is vue's data bidirectional binding.
Vue does data binding through data hijacking, and the core method is to monitor data changes through the Object.defineProperty () hijacking property.
Object.defineProperty is a method of ES5, which can directly define a new property on an object, or modify an existing property and return the object. There are two main forms of attribute descriptors in objects: data descriptors and access descriptors.
Data descriptors are attributes with writable or unwritten values.
An access descriptor is an attribute described by a pair of getter-setter functions.
The descriptor must be in one of two forms; You can't do both at the same time. In other words, there are values and writeable, or get and set.
Attribute descriptors include:
We already know how to realize two-way binding of data. The first thing is to hijack and monitor the data, so you need to set up a listening observer to monitor all the attributes. If the property changes, you need to tell the subscriber observer to see if it needs to be updated. Because there are many subscribers, we need to have a message subscriber Dep to collect these subscribers, and then manage them uniformly between listener observers and subscriber observers. Then, we need an instruction parser Compile, which scans and parses each node element, initializes the corresponding instruction as a subscriber observer, and replaces the template data or binds the corresponding function. At this time, when the subscriber observer receives the change of the corresponding attribute, it will execute the corresponding update function, thus updating the view.
Therefore, next, we perform the following four steps to realize the bidirectional binding of data:
Depth response principle
Analyze the principle of Vue&; Realize bidirectional binding MVVM
The basic principle of response system. Jet research …
I just want to monitor the changes of an ordinary object when JavaScript implements MVVM.