基于VUE评论组件的组件自闭声明周期思考

基于VUE评论组件的组件自闭声明周期思考

以评论回复组件的删除权限做一个思考，如何定义服务化、可公用的组件。

业务场景

• 可删除学生回复的老师
• 可删除自己回复的学生
• 可删除所有人回复的管理员
• …
  以上是常见的业务中可能出现的角色权限，甚至还可能出现更加复杂的，在这种场景下，如果将业务判断耦合进入组件，那么可能会出现以下的情景：

<button v-show="isTeacher || isManage || ...">
    删除
</button >

一旦业务改变，组件就将无法维护，多种角色的权限会耦合在一起，修改一处需要验证多处，无法确定对其他业务的影响。

---

解决办法

使用面向对象的思想，将耦合业务进行抽离，使组件只关心按钮的显隐，从而做成基础的服务化组件。

使用自定义事件

在组件层面定义事件，对回复列表数据进行业务相关的处理，然后传入组件循环，让组件只关心该做的，从而降低关注度。

<component @beforeDelete="smFun(list)"></component>
smFun(list){
    ...//业务相关的处理
    return  list
}
//返回的list格式
[
    {
    content: '',
    delete: true
    }
]

处理后，回复组件本身只需要根据delete属性值控制按钮的显隐，从而脱离了业务，但这样的组件似乎还差点什么，很难用，每次都要写业务控制不是么？

易用性，props传递默认模式

根据上面的业务场景可以看出，类似管理员、学生、或者游客模式是较为常用的，那么不妨就在组件中默认提供，从而解决常用业务。

<compenent :isManage="true"></component>//例如管理员


----------
component.vue

<button v-if="isManage">删除</button>

根据当前公司主要业务，梳理出几种常用的模式，就可以减少大量的重复代码，减少关注度，也有利于新人快速熟悉公司架构，降低了对业务的熟悉程度要求。