一个2000多行的.vue组件有必要拆分成几个子组件么？

Question

这个组件是项目中的主要功能页面，因为是.vue文件，所以template，css，js都写在一起，这就造成这个组件有2000多行代码

但是这个组件中的代码基本都是无法复用的，可以确定这些代码只在这个组件中会用到，认为拆出来那就得考虑组件间的通信问题，有点多此一举，所以就没有细化拆出来。

不知道如果拆出去，有什么好处

另外，一直有疑问的是，.vue文件中css是写在组件内好，还是单独写在.css文件中再import进组件好，好在哪里

Answer 1

这个都可以 如果整个代码打包体积太大 建议按需引入
附上链接： https://blog.csdn.net/yangbin...

Answer 2

没有复用就不用拆的，不过你说你这个代码2000多行，还是建议你把css抽出来，不然到时候别人不好维护。

Answer 3

按目前的代码行数，当然包含 3 块，templeate、style 和 script 还是建议拆分

Answer 4

vue文件中css是写在组件内好，写在组件内的style标签里加上scope可以作为组件样式，不会影响其他组件，单独写在.css文件中再import进组件就是全局样式。
拆分的话看你实际情况，看看2000多行时候会不会影响后续维护（如果需要维护的话），如果影响的话，就以提高可读性可维护性为目的来进行拆分

Answer 5

一个组件两千多行，姑且认为css样式没有那么多，那一定是业务比较复杂了。
建议拆分组件吧，拆分很多时候并不是为了通用，而是为了 书写代码的人 容易阅读和管理开发。

Answer 6

能跑起来就行。

Answer 7

我个人觉得是需要拆分的，原因如下。

• 更新效率
  vue 的更新粒度是组件，如果组件中有数据发生变化，就会执行 render 函数生成新的 vnode 和旧的 vnode 进行 diff。哪怕这个数据只影响到一个元素渲染，其他元素也需要在 diff 过程中进行比较。极端情况是假设这个大组件里面有个倒计时。
  如果组件拆分得当的话，大部分的数据改动只会影响到子组件本身进行 diff ==> 渲染。所以合理得对这种大组件进行拆分，应用的更新效率会更高。
• 可维护性
  这个大的组件，一般情况来说都是由几个独立部分组成的，把这些拆分成子组件，更有利于代码逻辑内敛和解耦，其他人也能比较容易看出整体逻辑框架，避免被无关的细节逻辑影响，可维护性更好。

如果有说的不对的地方，欢迎讨论。