1. Fundamentals of Vue
When a Vue instance is created, Vue will traverse the properties in data, use Object.defineProperty (vue3.0 uses proxy) to convert them into getter/setter, and track related dependencies internally, and notify changes when properties are accessed and modified . Each component instance has a corresponding watcher program instance, which will record the property as a dependency during the component rendering process, and then when the setter of the dependency is called, it will notify the watcher to recalculate, so that its associated components can be updated .
2. The principle of two-way data binding
Vue.js adopts data hijacking combined with publisher-subscriber mode, hijacks the setter and getter of each property through Object.defineProperty(), publishes a message to the subscriber when the data changes, and triggers the corresponding monitoring callback. It is mainly divided into the following steps:
1. Recursive traversal of the data object that needs to be observed, including the attributes of the sub-attribute object, are added with setter and getter. In this case, assigning a value to this object will trigger the setter, and then the data change can be monitored
2.compile parses the template instructions, replaces the variables in the template with data, then initializes the rendering page view, binds the node corresponding to each instruction with an update function, adds subscribers who monitor the data, and receives notifications once the data changes , to update the view
3. Watcher subscribers are the communication bridge between Observer and Compile. The main things to do are: ① Add yourself to the attribute subscriber (dep) when instantiating itself ② It must have an update() method ③ Wait for the attribute to change When dep.notice() is notified, it can call its own update() method and trigger the callback bound in Compile, then it will successfully retire.
4. MVVM is used as the entrance of data binding, integrates Observer, Compile and Watcher, uses Observer to monitor its own model data changes, uses Compile to parse and compile template instructions, and finally uses Watcher to build a communication bridge between Observer and Compile , to achieve the two-way binding effect of data change -> view update; view interaction change (input) -> data model change.
3. The difference between MVVM, MVC, and MVP
MVC, MVP, and MVVM are three common software architecture design patterns, which mainly organize code structure and optimize development efficiency by separating concerns.
When developing a single-page application, often a routing page corresponds to a script file, and all page logic is in a script file. The rendering of the page, the acquisition of data, and the response to events for the user are all mixed together. In this way, when developing a simple project, you may not see any problems. If the project becomes complicated, the entire file will change. It is lengthy and confusing, which is very detrimental to project development and later project maintenance.
（1）MVC
MVC organizes the code structure by separating Model, View and Controller. Among them, View is responsible for the display logic of the page, and Model is responsible for storing the business data of the page and operating on the corresponding data. And View and Model apply the Observer pattern, when the Model layer changes, it will notify the relevant View layer to update the page. The Controller layer is the link between the View layer and the Model layer. It is mainly responsible for the response operation between the user and the application. When the user interacts with the page, the event trigger in the Controller starts to work. By calling the Model layer, the Model layer is completed. modification, and then the Model layer notifies the View layer to update.
As a developer, if you want to do a good job, you must first sharpen your tools. I believe that the addition of mac will make your development more effective and understand everything.
（2）MVVM
MVVM is divided into Model, View, ViewModel:
Model represents the data model, and both data and business logic are defined in the Model layer;
View represents the UI view and is responsible for the display of data;
ViewModel is responsible for monitoring data changes in the Model and controlling the update of the view, and handling user interaction operations;
Model and View are not directly related, but are connected through ViewModel, and there is a two-way data binding relationship between Model and ViewModel. Therefore, when the data in the Model changes, the refresh of the View layer will be triggered, and the data changed in the View due to user interaction will also be synchronized in the Model.
This mode realizes the automatic synchronization of Model and View data, so developers only need to focus on data maintenance operations instead of manipulating DOM themselves.
（3）MVP
The only difference between the MVP pattern and MVC is the Presenter and Controller. Use the observer pattern in the MVC pattern to realize the update of the View layer when the data in the Model layer changes. In this way, the View layer and the Model layer are coupled together. When the project logic becomes complex, it may cause code confusion and may cause some problems in code reusability. The MVP pattern achieves the decoupling of the View layer and the Model layer by using the Presenter. The Controller in MVC only knows the interface of the Model, so it has no way to control the update of the View layer. In the MVP mode, the interface of the View layer is exposed to the Presenter, so the changes of the Model and the changes of the View can be bound together in the Presenter. In this way, the synchronous update of View and Model is realized. In this way, the decoupling of View and Model is realized, and Presenter also contains other response logic.