What Vue two-way data binding principle?

 vue is the use of data hijacking, and the use of release - development model subscribers. The principle is the observer by observer Object.defineProperty()be hijacked to each attribute getter setter, when the data changes, the observer will be observed will be followed by a corresponding change in view of the above by Dep subscriber notification data watcher.

Specific implementation steps:

The first step: the need to observe the data objects recursively traverse, including sub-properties of the object attributes, plus all the setter and getter 
so, assign a value to this object, it will trigger setter, so you can listen to the data changes

Step two: compile command parsing template, the template variable substitution into data, then initialize rendering the page view, and bind each instruction node corresponding update function, add subscribers to monitor data, once the data are subject to change, to close to inform, update view

Third Step: Subscribers are Watcher communication between the bridge and the Compile Observer, the main thing is done: 
1, to the subscriber attributes (DEP) at their own instance of which added 
2, there must be a self-update () method 
3, until the property changes dep.notice () notification, can call itself the update () method, and trigger callback Compile bound, then mission accomplished.

Step four: MVVM as the entry data binding, integration Observer, Compile and three Watcher, to monitor their own data model changes through the Observer, to resolve compiled by Compile template directives, end-use Watcher erected between the Observer and Compile communication bridge, to data changes -> view update; view interactive changes (input) -> data model changes to two-way binding effect

Guess you like

Origin www.cnblogs.com/sunww/p/11301233.html