Vue componentization
concept
Vue is a core idea of the assembly, what is the component of? Components of the page is split into multiple components, each dependent CSS, JavaScript, templates, images and other resources on the development and maintenance together. Components are independent resources, reusable components within the system, can be nested to each other between the components and assemblies, and will be exposed to the external interface to facilitate other component calls.
Components may be a module may also be a function, such as navigation, drop down menus, time controls, etc. can be.
Componentized features
- High cohesion: Component function must be complete, best single, a component is only responsible for a function.
- Low coupling: Popular, independent of code and other code pages will not conflict. If you go to write code, such as a html file has only one page, all CSS, JS, HTML code is written in this file, then the file will be very large, often thousands of lines, is very conducive to the development and maintenance of a previous frame, If you remove a feature, involves a lot of code, it is prone to problems, is now independent of each other between a page is divided into a number of components, assemblies, will avoid this problem.
Advantages of assembly
- Easy reuse
- Improve development efficiency
- Simplify commissioning steps
- Enhance the maintainability of the project
- Facilitate collaborative development
Components of problem solving
Component-based development is the development of thinking in order to solve complex business logic, teamwork and more difficult to solve than, component-based thinking can help us to do as much as possible: Who development, who is responsible; who manage maintenance; clear responsibilities, simple communication Convenience.
Single Page Application (SPA)
Single-page application refers to only one application browser page, the browser does not reload the page during the run, after all interaction is done on a page, these are by switching vue-router match the different components of vue to display different content pages.
Multi-page application (MPA): refers to an application has multiple pages, the page is jump a full page refresh.
Application of the benefits of a single page
- The user experience is good, fast, you do not need to change the content of reloading the entire page, based on this SPA less pressure on the server. From the level of performance and user experience to compare it, the back-end routing each time you visit a new page when should send a request to the server, and the server then responds to the request, the process will certainly be delayed. The front-end route to visit a new page when the transformation is only a little paths only, no network delay, for the user experience will be a great improvement.
- Single-page application does not switch between the pages, it will not appear "white screen phenomenon", it will not appear suspended animation and a "flicker" phenomenon.
- Good separation of front and rear ends. Backend no longer responsible for rendering templates, work output page, only the data on it, back-end API universal, that is, the same set of back-end code, without modification to the web interface, mobile phones, tablets and other clients.
Disadvantages of single-page application
- First load takes more: a single-page Web applications to achieve the function and display effect, you need a JavaScript when the page is loaded, CSS uniform loads, partial page can be loaded when needed. It must be merged with JavaScript and CSS code compression process, if you use third-party libraries, it is recommended to use some large companies CDN, therefore bandwidth consumption is inevitable.
- SEO more difficult: Because all content is dynamically replaced displayed on one page, so the search engines can only capture the data returned by the backend, can not capture the entire HTML data.
The principle of single-page application
Single-page application is an application running in the browser, the page is not reloaded during use. When you click navigation through the hash listening event, if the hash changes, changing the hash value: window.location.hash, use to call the js file.
Js file corresponding to respective data which can put the template, when used ajax request and returns the data, render the template to generate the corresponding DOM structure, and then inserted into the corresponding page of the div.
Rationale: to hash form (you can also use the History API to handle), for example, when the url hash changes, triggered hashchange registered callback, callback to perform different operations on display different content.
Why single-page applications and vue-router has a relationship, because the single-page application will not reload the page, just to match different display components by changing the hash. So single-page application is based vue-router and components to achieve.
First vue is a single-page application, resulting in a switch to another page url will not change, this time found the route will not change the hash url trigger to make the page re-rendering, so I used to do vue hash route, which is also the origin of vue route. vue routing is used to match the corresponding components.