Home > Article > Web Front-end > What is modularity in vue
In Vue, modularization is to encapsulate a single function into a module (file). The modules are isolated from each other, but they can expose internal members through specific interfaces, and can also rely on other modules ( Facilitates code reuse, thereby improving development efficiency and facilitating later maintenance). The benefits of modular development: 1. Clear organization and easy maintenance; 2. All data will not be requested back at once, and the user experience is good; 3. Modules are isolated from each other, but internal members can be exposed through specific interfaces, or Depends on other modules.
The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.
What is modularity
We say that Vue projects are divided according to modules, so what are modules?
Modularization is equivalent to the navigation bar of our website, then each navigation item can be regarded as
# mentioned in the following picture
main file (module parent component), this file must be registered in the routing management (router/index.js). When registering, it must meet the following form:
export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Default', redirect: '/home', component: Home }] })The remaining components can be injected in the following ways use. When using it, label the name in the name attribute of the component in the parent component (vue will convert the name named in camel case -------- (BookManager——>book-manager) )
Summary:
Why use modularity? The benefits of using modularity
Of course, all functions of the page can be realized without using modular development, but it will increase the pressure on server requests and reduce the user experience. When the page needs When there is too much data, one request contains all the requested data. What if the user does not need it? Is such a request still effective? Of course it has no effect, so this kind of problem can be solved by using the idea of modular development Briefly talk about the benefits of using modular development1. Clear organization and easy maintenance 2. All data will not be requested back at once, and the user experience is good3. Modules are isolated from each other, but internal members can be exposed through specific interfaces, or they can rely on others ModuleComparison between modularization and componentization
1. Componentization is an independent and reusable code organization unit. The component system is one of the core features of Vue. It allows developers to build large applications using small, independent and usually 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. Vue components are based on configuration. The components we usually write are Component configuration 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 events, slots, etc. They are mainly Used for component communication, expansion, etc.; 6. Reasonable division of components can help improve application performance; 7. Components should be highly cohesive and low coupling;8. Follow the principle of one-way data flow.
The difference between them is
Modularization: it is divided from the perspective of code logic; it facilitates hierarchical development of code and ensures that each functional module has a single functionComponentization: It is divided from the perspective of UI interface. The componentization of the front end facilitates the reuse of UI components [Related recommendations:vuejs video tutorial, web front-end development】
The above is the detailed content of What is modularity in vue. For more information, please follow other related articles on the PHP Chinese website!