Front-end technology community general directory (please check this blog before subscribing)
Vue data two-way binding mainly refers to: data changes update the view, and view changes update the data.
Implementation principle: using "data hijacking" combined with the "publisher-subscriber" mode, and using the "Object.defineProperty()" method to hijack each Property setters and getters publish messages to subscribers when data changes, triggering corresponding listening callbacks.
Vue mainly implements two-way data binding through the following four steps.
(1) Implement a listener Observer
(2) Implement a parser Compile
(3) Implement a subscriber Watcher
(4) Implement a subscriber Dep
The four-step flow chart is as follows:
The sample effect is as follows:
(1) Implement a listener Observer:
traverse the data object, including the attributes of the sub-attribute object