Vue two-way data binding principle is to use data binding hijacking publisher - subscriber model to hijack individual attributes by object.defineProperty () of the setter, getter, posted a message to subscribers when data changes, trigger the listener callback
Specific steps are as follows:
1. The need to observe the data objects recursively traverse, including sub-properties of the object attributes, plus both setter and getter, so, assign a value to this object, it will trigger setter, so you can listen to the data changes
2.compile template parsing command, replaces template variables 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, notified , update view
3.Watcher subscribers is a bridge of communication between the Observer and Compile, the main thing to do:
(1) itself when the property is instantiated to the subscriber (DEP) which add their own
(2) There must be a self-update () method
(3) changes in the properties to be dep.notice () notification, can call itself the update () method, and trigger callback Compile bound, then mission accomplished
4.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 the Compile command template, eventually using the communication bridge between the Watcher and Compile erected Observer , to data changes - "view update; view interactive changes (input) -" data model of two-way data binding effect change