Vue - 项目中如何封装好一个业务组件

前言

在日常业务开发中，我们会经常封装一些业务组件，一个页面中可能就有多个业务组件构成，这里和大家分享一下个人的经验，如何封装好业务组件，便于维护

1、将业务和视图解耦

子组件

父组件(页面组件)

可以看到上面子组件中的视图层渲染的数据依赖当前mounted钩子调用api请求返回的数据，这样做有几个不好维护的地方

• 业务逻辑和组件数据层耦合在一起，假如已经有个多个页面都用到这个组件，但是需要调用不同接口，那这个组件就没法用了
• 业务逻辑和组件视图层耦合在一起，假如已经有个多个页面都用到这个组件，但是组件A需要渲染info.name，而组件B要渲染info.title，那这个组件也没法用了

我们做下调整，将子组件业务部分抽离出来，形成纯粹只关心自身展示和交互能力的原子组件，然后我们多一个业务组件来承接各个原子组件组合而成的业务，最后再由页面来承接各个业务组件

原子组件 - Card

业务组件(由多个原子组件组成这里为了简单只用一个原子组件) - Buiness

页面组件(由多个业务组件组成这里为了简单只用一个业务组件)

可以看到这么做将业务解耦开，原子组件负责自身原子能力，业务组件负责业务由多个原子组件组装，最后将多个业务组件组装成一个业务页面，各司其职，变得十分清晰

举个实际例子，比如我们有个购物车页面，页面中有

(比如订单页、官网首页等)应该由多个业务组件构成，而业务组件又有多个原子组件构成，原子组件可以由多个基础ui组件(如button、input等)构成，

2、孙子、曾孙组件需要重写问题

假如有个页面A，A中有个组件B，B中有个组件C，C中有个组件D...，一个组件嵌套下一个组件，假如S页面也用到组件B，但是他想把B的孙子组件D，换成组件Y，那咋办呢，可以用slot插槽的形式做个改写

原子组件B(使用原子组件C，同时用slot包裹，方便重写)

 原子组件C(使用原子组件D，同时用slot包裹，方便重写)

不同业务组件下使用原子组件B；

业务组件A(使用原子组件B)

页面S(需要把原子组件B下的原子组件C下的原子组件D改成原子组件Y)

 这么写组件的灵活性会高很多，而且很好维护，并且原子组件Y的业务特性可以直接由业务组件掌管，省去了需要一层层传props，但是不推荐组件嵌套太深，不然可读性会降低

3、推荐使用Vue3的composition-api

补充：其实composition-api有点类似mixins，可以把业务流程相关的方法、变量抽离出js，不过mixins最大的缺点就是无法追溯上下文，而composition-api很好的解决了这个问题。

如果我们把所有的业务流程都丢到业务组件上可能会导致js代码变得很多，可以使用composition-api将流程抽离出js来，可以降低业务组件内的代码量，同时流程也可以被其他业务组件所复用

总结

很多时候我们抽离不是为了复用，是为了结构可清晰

然后就是关注一下我的公众号呀，就是底下这玩意，每天能领外卖红包、打车红包，还有各种优惠卡券会员啥的，帮你省钱，这么好的博主能有啥坏心思呢~