“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”
1, implement a data listener Observer, can listen to all the attributes of the data object, if there is any change can get the latest value and notify the subscriber
2. Compile an instruction parser, scan and parse the instructions of each element node, replace data according to the instruction template, and bind the corresponding update function
Implement a Watcher that acts as a bridge between the Observer and Compile, subscribing to and receiving notification of each property change, and executing the corresponding callback function bound by the directive to update the view
4, MVVM entry function, integration of the above three
Principle: In new Vue, data hijacking is achieved in the Observer via Object.defineProperty(). Getter and setter properties for all data are proxyed to Watcher via Dep each time a setter is triggered. Watcher acts as a bridge between the Observer data listener and the Compile template parser. When the Observer listens for data changes, the Updater informs Compile to update the view
Compile subscribes to the corresponding data through Watcher, binds the update function, and adds subscribers through Dep to achieve bidirectional binding