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

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

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

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

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

回答:

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

回答:

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

回答:

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

回答:

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

回答:

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

回答:

能跑起来就行。

回答:

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

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注