最近是用vue全家桶写了一个中小型的电商项目,遇到的许多问题,其中有一个就是关于vue的组件化。
举个例子,在项目中经常遇到组件划分,组件该怎么划分,划分多细,以及方法和数据该放在哪个组件当中等等问题。因为这些概念不清晰,导致了赶项目的时候写代码写的十分的“散漫”。

在查了资料过后对于组件化这个概念有了一定的理解。

首先摘抄总结了大佬们对组件化的概念:
组件化是基于模块化的,在设计层面上,对UI(用户界面)的拆分。每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。组件化除了要处理组件这种本身的封装,还要处理组件之间的逻辑(JS)继承,样式(CSS)扩展和模板(HTML)嵌套等关系。广义的组件化包括对数据逻辑层业务梳理,形成不同层级的能力封装。

借鉴一下张云龙大佬画的一张图来形象的描述组件化

自己对于组件化的通俗理解就是每个应用界面都可以抽象成一个个独立的,可复用的,自包含的,可复用的组件。组件化的本质目的并不一定是要为了可复用,而是提升可维护性。

接下来谈组件化的优点,我觉得独立这个词可以很好的概括组价的优点,当独立了之后,组件之间可以隔离,可以很好的降低复杂度,隐藏性更好,妥妥的高内聚,低耦合。

后面来谈下我最困惑的一个问题:组件该如何划分,组件划分的粒度,数据和方法的归属。
在查了资料和看了大佬们的项目结构之后,发现他们通常会把组件分为通用组件(木偶组件)和业务组件(智能组件)。
木偶组件应该是和业务无关的,是有简单状态或者无状态的,数据几乎全部依赖于输入,它只负责渲染给入的数据。比如按钮是一个组件,可能有一个参数决定了它的尺寸,一个参数决定了它是否可以点击,但是点击这个按钮之后会发生什么,就不是按钮这个组件需要知道的事情了。
智能组件可以由多个木偶组件组成和其他的智能组件组成,会拥有一些方法,用来修改持有的数据,对内来看,它自己持有一些数据和方法,用来决定TodoItem的渲染,对外又是一个简单的props接受数据。可以理解为组件树的非叶子节点,通过自身数据变化,进而操纵子组件的内容。

组件化的思想就先概括到这里了~把大佬们的想法总结了一下,还有很多地方没有理解到位,先记录一下现在的感受,后期有了新的认识再来补充或者修改。

参考:
http://www.jointforce.com/jfperiodical/article/3518?utmsource=tuicool&utmmedium=referral
https://www.zhihu.com/question/53376712
http://www.jianshu.com/p/67a6004f6930#
https://cn.vuejs.org/v2/guide/index.html#组件化应用构建

发表评论

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