Is it necessary to split a .vue component with more than 2000 lines into several subcomponents?

this component is the main functional page in the project. Because it is a .vue file, the template,css,js is all written together, which results in more than 2000 lines of code for this component

but the code in this component is basically unreusable, and it can be determined that the code will only be used in this component. I think that if you take it out, you have to consider the communication between the components, which is a bit superfluous. so it didn"t come out in detail.

I don"t know what the benefits will be if I take it out

in addition, there has always been doubt as to whether the css in the .vue file should be written in the component or written separately in the .css file and then import into the component.

Javascript vue-cli vue.js

May.08,2021

this can be done. If the package volume of the whole code is too large, it is recommended to introduce
attach a link as needed: https://blog.csdn.net/yangbin.

if there is no reuse, you do not need to disassemble it. However, if you say that you have more than 2000 lines of code, it is still recommended that you extract the css. Otherwise, it will be difficult for others to maintain.

according to the current number of lines of code, of course it contains 3 blocks, templeate, style and script are still recommended to split

vue file css is written in the component, write in the style tag within the component and add scope as a component style, will not affect other components, written alone in the .css file and then import into the component is the global style.
split depends on your actual situation to see if more than 2000 lines will affect subsequent maintenance (if maintenance is required). If so, split more than two thousand lines of a component for the purpose of improving readability and maintainability

. If you think that there are not so many css styles, then the business must be more complex.
it is recommended to split the components. Most of the time, the split is not for general purpose, but to make it easier for the person who writes the code to read and manage the development.

as long as you can run.

I personally think it needs to be split for the following reasons.

Update efficiency
the update granularity of vue is a component. If any data in the component changes, the render function will be executed to generate the new vnode and the old vnode for diff. Even if this data affects only one element rendering, other elements need to be compared during the diff process. In the extreme, it is assumed that there is a countdown in this big component.
if the component is split properly, most of the data changes will only affect the child component itself for diff = > rendering. Therefore, if this kind of large component is split reasonably, the update efficiency of the application will be higher.
maintainability
this big component, generally is composed of several independent parts. Splitting these into sub-components is more conducive to code logic introversion and decoupling, and it is easier for others to see the overall logical framework, avoiding the impact of extraneous details logic, and better maintainability.

if there is something wrong, you are welcome to discuss it.

Previous: Use the aop intercept method and modify the value of the specified parameters in the method

Next: WeChat Mini Programs loads more questions

Vue.js realizes the specification selection function of commodity details page.
vue.js implements specification selection on product details page Click to select version option and click to select color option. Highlight has been selected. How to display the selected version and color html Code < div class= "chose-ck " > : ...

Html5 javascript vue-cli vue.js

Feb.27,2021
May I ask where the web page icon (favicon) of the project built by vue-cli was introduced? How can it be removed?
as shown in figure I really can t find it. Ask for help ...

Html5 html javascript vue-cli vue.js

Mar.02,2021
How does the vue destroyed () function change a css style?
in vue, this is a window departure event. I want to change the style of body through this, but it seems to have misreported . how can I change its style? ...

Front-end-framework javascript vue-cli vue.js

Mar.06,2021
Vue has obtained the back-end data, how to wrap it?
HTML get the backend data code ...

Front-end javascript vue-cli vue.js ajax

Mar.08,2021
In vue, how do I set up a function to be executed as soon as the page is loaded?
italic text this is the js code for a page of article details. I would like to ask how to define a function that will be executed as soon as I jump to this page? ...

Front-end front-end-framework javascript vue-cli vue.js

Mar.08,2021
In vs code's vue-cli project, the vetur plug-in is installed, resulting in all * .js formatting in the vue-cli project with 2 spaces?
after vs code installs the vetur plug-in, all the * .js file formats in the vue-cli project are aligned with 2 spaces. I usually use 4 spaces. In the configuration, I set "editor.tabSize ": 4, all files for non-vue projects * .js, * .html,*.css, etc....

Visual-studio-code javascript vue-cli vue.js

Mar.10,2021
How to judge the currently selected item of the array in vue?
is there a boss who can help explain the principle of this line of code? Yesterday, a big guy in the group shared the method. I used it and realized the function, but I don t understand why, which are vue and which are js native nextRoute.indexOf (...

Javascript vue-cli vue.js

Mar.13,2021
Switching between vue Test Environment and formal Environment
beginner vue, builds a project out of scaffolding and adds a "API_ROOT " to "dev.env.js ". The code is as follows use strict const merge = require( webpack-merge ) const prodEnv = require( . prod.env ) module.exports = merge(prodEnv, { N...

Javascript vue-cli vue.js

Mar.14,2021
Under the IE browser, what is the difference between the style of the vue project uploaded to the server and the local style?
in a vue project, the local running code localhost:8080 is different from the server ip address in ie11 browser and 360browser, as follows Local style ie11360 if I click anywhere on the page on the server or move the mouse into the navigation bar ar...

Front-end-framework front-end javascript vue-cli vue.js

Mar.15,2021
After the vue project is packaged, an error is reported under ie: 'SCRIPT1006: missing')''this is true for both ie8,9,10,11
ie 8,9,10,11 Edge...ES6 webpackbabel-polyfill es6 es5 ...

Javascript vue-cli vue.js

Mar.21,2021
How to reference the js method in external links in a vue single page file
my front-end project is built directly using vue scaffolding and vue-cli. At present, I only know that you can import a js file into the .vue page through the import xxx.js file, and then I would like to ask how to introduce the outer chain? I trie...

Web front-end javascript vue-cli vue.js

Mar.21,2021
After the vue project is packaged, the font file reports an error, but the page displays normally
as shown in the figure, this error is reported after the project is packaged. It should be a path error, but I don t know how to correct it . ...

Javascript vue-cli vue.js

Mar.21,2021
What files should vue-cli assets and static put respectively?
what files should vue-cli assets and static put respectively? There are many explanations about assets and static on the Internet, but I feel that there is no concise explanation there are many articles like this, but all I need is where to put some j...

Javascript vue-cli vue.js

Mar.22,2021
The problem of echarts migration map (cross-provincial, transnational, cross-city display is problematic)
there are three migration maps for business demand. Cities in other provinces migrate to Xi an and cities in other countries migrate to Xi an. These two maps have been realized, but the map of other cities in Shaanxi Province migrating to Xi an shows...

Html5 javascript vue-cli vue.js echarts

Mar.22,2021
After the vue project is packaged, there is no icon for the title on the browser?
after the vue project is packaged, there is no icon for the title on the browser? webpack.prod.config.js: const webpack = require( webpack ); const HtmlWebpackPlugin = require( html-webpack-plugin ); const ExtractTextPlugin = require( extract-te...

Javascript vue-cli vue.js

Mar.24,2021
With regard to the switching components of the vue tab and using the same interface, please give us some suggestions.
I have a vue technical question for you. I have a tab tab in the component page that uses: is to dynamically switch components, but both are the same request interface, but I don t want to use the same interface for both components at the same time! Cou...

Vue-router javascript vue-cli vue.js

Mar.28,2021
Watch cannot listen properly after vue is extracted into components
watch in the vue component listens for changes to the formSearch, but if you modify the formSearch.memberPhone while listening, you can t listen. There was no problem with writing it in the page before, but now it is extracted into a component . <te...

Html5 javascript vue-cli vue.js

Apr.09,2021
How to write the left navigation bar of vue project in the form of interface?
as shown in the figure, it is written to death directly. What should I do if I get it in the form of an interface? 1. Send a request to get the first-level menu of the navigation bar, and then send ajax again to get the second-level menu according to ...

Javascript vue-cli vue.js

Apr.29,2021
How to load / unload components introduced in App.vue and < router-view/ > at the same time
as shown in the figure, I have header and footer two common components, which are introduced in app.vue. Now there is a problem that when I refresh the page, the code in router-view will be unloaded and reloaded, but header and footer in ap...

Javascript vue-cli vue.js

Jun.03,2021
How to correctly introduce pictures in assets into style in .vue file
if you want to introduce the picture resource in the assets folder in the css in the style in the .vue file, always report an error this is the css, in the style in some vue component. In this way, I can t get the picture resource according to the r...

Javascript vue-cli vue.js

Jul.08,2021