vue组件封装技巧，如何对vue模块进行功能封装

如何对vue模块进行功能封装，vue组件封装技巧

当业务不断累加，导致原本干净整洁的代码越来越冗余，各种变量和注释已经让他人望而却步，往往又苦于重构带来的成本，导致诞生很多巨石应用。与其让自己或他人面临这种问题，不如我们一起来学习下，如何将代码更优雅的组织起来，前人栽树，后人乘凉。

我经常和别人强调，一定要做好设计，设计的目标是什么？个人理解是，增加代码的可塑空间，降低维护成本。

文档设计是必要的吗？
答案是肯定的，在做业务之前一定要做好设计，但究竟哪些是需要我们设计的呢？做好以下几点，轻松搞定前端文档设计：

1. 需求目标是什么？
2. 你是怎么理解需求的
3. 实现方案是什么
4. 关键节点的数据解构设计是什么
5. 模块的作用
6. 如何CRUD
7. 新人拿到这个文档是否可以理解你的设计思路

很多时候大家是没有时间做设计的，但在开发之前这些是你必须要确认清楚的，尤其是对于新手来说，建议大家不要立刻开始开发任务，一定是要想清楚才动手。理想情况下70%设计（输出伪代码），30%的业务填充。好的领导一定会重视员工的成长和项目的未来的，如果有条件，就用文档把想法输出吧。

有了思路和方案，我们来看看怎么去把代码组织的更优雅吧，首先我们需要思考几个问题：

• 目录结构如何建设，理由是什么。
• 模块功能划分，是否遵循高内聚，低耦合的思想？
• 函数怎么设计，是否可移植可复用。
• 是否有清晰的注释说明

以上4点，我们在开发过程中，新建文件和函数时，要时刻注意，目标是让我们建设的工程，结构清晰，模块作用明确，各施其职，就像一排排整齐的水管。

vue组件封装技巧

1. 提取公共常量
2. 提取公共工具类
3. 提取类型声明文件
4. 单个vue组件封装

单个vue组件封装
组件拆分
将独立的功能拆成一个个组件，就像你看到一个网页设计稿，很容易把它拆成不同的div模块，相互协作拼装出来一个完整的网页一样，稍加练习，这对大家来说很容易做到。
例如：

数据模型
按照功能模块将数据封装成对象或数组
反面例子：

private pprMenuTemporary = []; // 正在拼装中的pprMenu，这个是为了解决处理过程中更新数组不刷新的问题
private entityName: Array<string>