17. What are the pros and cons of MVVM?
advantage:
Separate View and Model to reduce code coupling and improve view or logic reusability: For example, View can be changed and modified independently of Model, and a ViewModel can be bound to different "View "Above, when the View changes, the Model cannot remain unchanged, and when the Model changes, the View can also remain unchanged. You can put some view logic in a ViewModel and let many views reuse this view logic
Improve testability: the existence of ViewModel can help developers write test code better
Automatically update dom: Using two-way binding, the view is automatically updated after data is updated, freeing developers from the cumbersome manual dom
shortcoming:
Bugs are difficult to debug: because of the two-way binding mode, when you see an interface exception, it may be that your View code has a bug, or there may be a problem with the Model code. Data binding enables bugs in one location to be quickly transferred to other locations, making it not so easy to locate the original problem. In addition, the declaration of data binding is written in the View template in an imperative manner, and there is no way to interrupt the debug for these contents.
The model in a large module will also be very large. Although it is convenient to use and it is easy to ensure data consistency, it will cost more memory if it is held for a long time and the memory is not released.
For large-scale graphics applications, there are many view states, and the cost of building and maintaining ViewModel will be relatively high.
18. Which one has higher priority, v-if or v-for? If they occur at the same time, how should they be optimized?
v-for is parsed prior to v-if. If it appears at the same time, each rendering will first execute the loop and then judge the condition. In any case, the loop is inevitable and wastes performance.
To avoid this situation, nest the template in the outer layer, perform v-if judgment on this layer, and then perform v-for loop inside. If the condition appears inside the loop, those items that do not need to be displayed can be filtered out in advance through the calculated property.
19. Understanding of Vue componentization
1. A component is an independent and reusable unit of code organization. The component system is one of the core features of Vue, which enables developers to build large applications using small, independent and often reusable components;
2. Component development can greatly improve application development efficiency, testability, reusability, etc.;
3. Component usage is classified into: page components, business components, general components;
4. The components of vue are based on configuration. The components we usually write are component configurations rather than components. The framework will generate its constructors later. They are based on VueComponent and extend Vue;
5. Common componentization technologies in vue include: attribute prop, custom event, slot, etc., which are mainly used for component communication, expansion, etc.; 6. Reasonable division of components can help improve application performance;
6. Components should be high cohesion and low coupling;
7. Follow the principle of one-way data flow.