What is Vue
is a progressive Javascript framework for building user interfaces (MVVM pattern)
What is MV*
Divide the code into modules according to the function
What is MVC
MVC (Model, View, Controller) data, view, controller
Model : data model, used to store data
View : view interface, used to display UI interface and respond to user interaction, display data
Controller : Controller, monitor model data changes and control view behavior, handle user interaction
MVVM pattern
The MVVM framework is more suitable for scenarios where there are many data operations, and it is helpful to manipulate data and render pages
M (model) : data
V (view) : view
VM (viewmodel) : view model, used to manage the replacement of views and models
MVVM is an enhanced version of MVC, there is no essential difference from MVC, only the location of the code changes
Vue's data two-way binding
The model changes when the view changes, and the view changes when the model changes
How does data update view, because view update data can actually be monitored through events
For example, input tags can monitor input events
Steps for two-way binding
Implement a listener Observer, which is used to hijack and monitor all attributes, and notify subscribers if there is any change
Implement a Subscriber Watcher that can receive property change notifications and execute corresponding functions to update the view
Implement a parser Compile, which can scan and parse the relevant instructions of each node, and initialize the template data and initialize the response subscriber according to
The principle of Vue two-way binding
The two-way binding of Vue data is realized through data hijacking combined with publisher-subscriber mode
Its core implements data hijacking by setting the set and get functions through the Object.defineProperty() method
Publish a message to the subscriber when the data changes, and trigger the corresponding listening callback
Data and View Synchronization
data change, view change
View changes, data changes