对vue大组件拆分的思考

超、凢脫俗 2023-03-01 05:46 178阅读 0赞

### 拆分大对象 ###

组件化的vue给人的印象往往是快而小，简洁明了，但随着业务量和判断逻辑的堆叠产生，可能也会诞生一些很大的组件。

一个组件的HTML的代码量超过200行应该就算很大的组件了，今天对一个超过400行的组件如何进行优化来进行讨论。

### 引用模式： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]

#### 提高复用率 ####

在一个toB的工单界面，一个工单卡片的组件可以被任何一个状态页去组装，很明显card组件的复用性是很高的。  
可以考虑拆分后的子组件是否可以进行组件的引用。

#### 可读性与以维护 ####

一个超过400行的代码掺杂复杂的逻辑与状态判断，可读性不用说也是很差的，想定位一个位置由于代码量的原因就变得异常复杂。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]

#### 分层&&让程序可读 ####

将原组件进行拆分为如图所示的四部分，以card组件引入这四个子组件的形式，以减小整体代码上带来的影响。  
其他弹出框等，可留在card组件中。  
![在这里插入图片描述][20200722143044781.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70]: /images/20230209/ca0a8057e21f4e36985f101d68bd8468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjc3NDA0_size_16_color_FFFFFF_t_70 1]: /images/20230209/a980439440674f8eb89eb63e1f769cd5.png
[20200722143044781.png]: /images/20230209/33601acff39c4bdbbccf03096bf9c0ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 C# 对时间段进行拆分

在进行数据同步时我们可能遇到时间范围过大，导致数据量过大的情况。这个时候可以使用时间范围拆分，来减少数据量，以提升单次请求速度。时间范围拆分代码如下： /// <

落日映苍穹つ/ 2024年03月26日 11:14/ 0 赞/ 77 阅读

相关如何对数据库如何进行垂直拆分或水平拆分

如何对数据库如何进行垂直拆分或水平拆分业务前提水平拆分垂直拆分业务前提订单表，结合当前业务和机器性能，大概是1000万条左右的样子。

妖狐艹你老母/ 2023年10月12日 08:29/ 0 赞/ 28 阅读

相关对vue大组件拆分的思考

拆分大对象组件化的vue给人的印象往往是快而小，简洁明了，但随着业务量和判断逻辑的堆叠产生，可能也会诞生一些很大的组件。一个组件的HTML的代码量超过200行应该就

超、凢脫俗/ 2023年03月01日 05:46/ 0 赞/ 179 阅读

相关 Python：对列表分组、拆分

对列表的操作 1. 对列表元素分组 2. 多层列表展开成单层列表 1. 对列表元素分组 from math imp

妖狐艹你老母/ 2022年09月14日 08:42/ 0 赞/ 227 阅读

相关应用拆分思考

以下是根据现在做的系统，做出来的如下的总结：应用拆分基本原则根据业务场景来明确划分出几个互不影响或者影响很小（仅需要提供数据）的系统。如：搜索查询、订单、账资

悠悠/ 2022年07月13日 10:47/ 0 赞/ 240 阅读

相关 vue(三)—组件与组件的拆分

组件分为全局组件和局部组件，每个vue的组件都是vue实例，每个vue实例也都是组件，组件定义后就可以多次的拿来当模板用每个组件里面都有一个模板属性templa

我不是女神ヾ/ 2022年01月27日 11:57/ 0 赞/ 522 阅读

相关 vue组件的拆分

vue组件的拆分 <div class="div">  <moban></mo

超、凢脫俗/ 2021年12月19日 04:05/ 0 赞/ 293 阅读

相关对位拆分数字金额

效果图： <table> <tbody> <tr> <td>亿</td> <td>仟</td> <td>佰</td> <td>拾</

- 日理万妓/ 2021年10月01日 06:06/ 0 赞/ 289 阅读

相关 vue项目笔记（25）-公共组件拆分

公共组件拆分（画廊组件） vue项目开发中，有些组件不仅仅是一个页面需要使用，这时候我们可以将其抽离出来，作为一个公共组件。公共组件常用的目录结构如下（其中Galle

ゝ一纸荒年。/ 2021年09月16日 03:30/ 0 赞/ 396 阅读

相关 Vue页面骨架—— 组件拆分

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朱雀/ 2021年07月25日 15:48/ 0 赞/ 441 阅读