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

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b384f1-2c0ea.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b384f1-2c0ea.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?