编写可复用的vue组件

随着业务的逐渐增多，前端业务线越来越多，封装公共组件是一个非常必要的工作。公共组件是一个独立的、可重复使用的模块，它可以有自己的模板、样式、数据、行为和生命周期钩子等特性。
在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
目录
●组件的设计原则和规范
●组件的分类
●Vue 组件封装模式
●一个好的可扩展、通用的、健壮性组件
组件的设计原则和规范
单一职责原则：每个组件应该只负责一个特定的功能，并且应该将其全部封装在组件内部。
可重用性：组件应该是可重用的，这意味着它们应该能够在不同的上下文中使用，并且应该尽可能与其他组件解耦。
可测试性：组件应该易于测试，这意味着它们应该能够独立于其他组件进行测试，并且应该能够模拟其各种状态和行为。
可维护性：组件应该易于维护，这意味着它们应该易于理解和修改，并且应该遵循一致的代码风格和结构。
可扩展性：组件应该易于扩展，这意味着它们应该能够与其他组件和库进行集成，并且应该能够支持新的功能和需求。
组件的分类
项目中组件的划分是分页面级组件、全局级别组件，而结构一般是这样
components 中存放的组件是当前项目中的多个场景复用才会进行设计与封装，成为通用业务组件。
pages 中存放的组件是当前项目中按路由跳转的页面级组件。它本身也是业务组件，内部文件夹会包含业务子组件。
1业务组件
业务组件更注重业务逻辑的实现，通用性并不是第一位，效率和功能是他更需要关注的。它主要承载着具体业务的数据处理和界面交互处理。大多数情况下业务组件会结合通用业务组件或者UI组件去实现业务逻辑。编写业务组件开发者应该注意代码逻辑清晰，结构合理。
2通用业务组件
通用业务组件更注重业务的多范围应用，例如一个通用的数据表格，包含了与业务相匹配的标准头部和标准的配置数据等。它的特点主要是扩展性、通用性、健壮性。也就是上面提到的components内的组件
3通用非业务组件
通用非业务组件一般情况下是指UI库组件或者基于UI组件库二次封装的UI组件，也有一些特殊的功能性质组件例如：EventBus组件。它的特点也是扩展性、通用性、健壮性。通用非业务组件需要部署到npm仓库内或者公司内部私有仓库内，通过npm或yarn来安装使用。基于UI组件库二次封装的UI组件数量不多时放到components/base-ui目录内，特殊性质的通用组件（EventBus等）需要放到components/base-fun目录内。
无论是 业务组件 或者 通用组件都具备组件本质所包含的三个性质扩展、通用、健壮
●扩展性：在原有组件基础上可 二次封装 扩展成新的组件符合设计的开闭原则
●通用性：根据组件接受的参数和组件中与业务的解耦比来衡量组件的通用性，并不是通用性占比100%的组件就是最好的组件，需要根据 不同的场景 具体分析
●健壮性：避免组件中参数处理和函数执行过程可能出现的奔溃和错误导致程序的直接挂断，单测以对组件内部做好边界处理，异常错误的捕获来衡量这一标准
Vue 组件封装模式
业务中的组件区分为容器组件和视图组件

组件设计

容器组件

视图组件

容器组件负责处理业务相关逻辑，注册业务相关钩子，传入相应的熟悉和插槽等
视图组件则负责数据的呈现，交互的实现

容器组件

视图组件

视图组件

视图组件

容器组件往往不可复用
视图组件则根据组件的样式和交互判断组件在项目中的频率来抉择是否封装
视图和数据解耦又能搭配可以很好的提升组件的可读，易维护性
这个组件是否需要封装抽离?
不是所有DOM结构都需要抽离
你需要对你所负责的项目UI走向有着全局的洞察力，如果不确认的是否需要封装，建议不封装
下次业务中存在与原来视图 UI 相同的需求 再进行封装设计，而不是快速 Copy。
通常情况，组件中的大量数据来源当前组件的接口请求。没有依赖或者几乎不依赖外部传入的props等，称为业务强关联组件，放弃组件封装的想法。
怎样才是一个好的可扩展、通用的、健壮性组件？
1直接脱离 UI
●接受参数，处理钩子
●组件中的UI和数据业务尽量分离
●UI视图组件中不该包含业务代码
●组件设计之初考虑通用、易用、扩展、健壮稳定 以及 良好的代码结构、Api设计使用
组件API设计
组件API是组件与外部交互的接口。一个好的组件API应该是易于理解、易于使用、易于扩展和易于维护的。在Vue.js中，我们可以使用props和事件来设计组件API。
1. Props
Props是组件的输入参数，它定义了组件需要从外部接收哪些数据。一个好的Props设计应该包括以下几个方面：
类型：props应该定义一个或多个数据类型，以确保组件接收到的数据是符合预期的。
必要性：props可以指定是否必须传入某个参数。
默认值：props可以定义默认值，以便在父组件没有传入该参数时，组件可以使用默认值。记得要用函数返回默认值，确保组件被多次引用数据不会被影响。
校验：props可以定义校验函数，以确保组件接收到的数据符合预期。
2. 事件
事件是组件向外部发送消息的方式。一个好的事件设计应该包括以下几个方面：
●名称：事件应该有一个有意义的名称。
●数据：事件可以传递一些有用的数据，以便父组件可以理解组件发出的消息。

HTML复制代码

1

2

3

4

5

6

7

8

9

10

11

12

Vue.component('my-component', {

template: '<div><button @click="onClick">Click me!</button></div>',

methods: {

onClick: function () {

this.$emit('my-event', { message: 'Hello, Vue.js!' })

}

}

})

//在父组件中使用my-component组件，并监听my-event事件：

<my-component @my-event="onEvent"></my-component>

四、组件复用
组件复用是Vue.js中的一个重要特性，它使得我们可以将组件定义为可复用的模块，并在应用程序中重复使用。下面是一些编写可复用组件的最佳实践：

1. 单一职责原则
每个组件应该只负责一项功能。这使得组件更易于理解、测试和维护。如果一个组件做太多的事情，它就会变得难以理解，而且很可能会变得不可复用。

2. 组件解耦
组件应该是解耦的。这意味着组件应该尽可能少地依赖其他组件或库。如果一个组件依赖于太多的其他组件或库，它就会变得难以复用，并且会增加应用程序中出错的可能性。

3. 可配置性
组件应该是可配置的。这意味着组件应该具有一组可以配置的选项，以便在不同的上下文中使用。这些选项可以是props、插槽、事件等。

4. 插槽
插槽是Vue.js中非常有用的特性，它使得组件更加灵活。通过插槽，我们可以将一部分HTML代码嵌入到组件中，并在组件的模板中使用<slot>标签来定义插槽的位置。

5. Mixins (不推荐)
虽然Mixins也是一种用于复用组件逻辑的方式，并且Mixins也可以提高组件的可复用性和代码复用率。但是mixins用多了会发生找不到数据来源的情况，给开发人员造成更大的开发麻烦。

若有收获，就点个赞吧