Vue组件化思考

项目结束一段时间，写个文章总结下。初入项目组，看到了3000行的vue文件，一口血差点捧出，无奈上一个程序员已经离职，留下的坑，只能本身填上了。在重构项目的过程当中，也发现了一些别的问题，组内分享会作了总结分享，此次总结成文章特此记录。

用搭积木的方式构建vue组件，就如同搭积木同样，构建咱们的项目

在项目中，对于组件的划分，咱们通常会划分为业务组件和功能组件，也能够称为视图组件和容器组件。在react中也被称为无状态组件和UI组件。组件划分明确，对于代码的可维护性和阅读性有必定的便利性。划分方式以下图所示：

组件设计考量，分而治之

天下大事，分久必合，合久必分。组件亦然，由之前的写在一块儿，到现在的明确划分。分而治之的思想，也可让咱们更加专一于主要的功能实现，便于扩展和复用。
在组件的设计中，须要考虑如下几点：

可扩展性强

扩展性首先是咱们要考虑的点，若是不能扩展，就表明着代码写死，失去了代码的灵活性

组件中方法函数的抽离，便于复用，适用程度高。

尽量使用方法定义，避免使用template表达式，不便于复用

文档清楚详细

毕竟写的组件是给人用的，不完善的文档让别人如何使用，确定不能手把手教别人怎么使用吧，因此一个组件详细的使用说明是必须的。

颗粒度合适，适度抽象

这个是一个经验的问题，如何衡量颗粒度是否合适，实际上是一个度的问题，每一个人有每一个人的见解，可是尽可能保证一个组件完成的功能是单一的，而不是多个功能的结合体。

功能尽量单一，代码行数适中

这一点和上面颗粒度相似，以代码行数衡量也能够，通常的组件若是抽离合适的话，绝对不会超过1000行，若是代码太多，就说明组件划分不合理，抽离不完善，须要从新设计。

必要的时候须要ui的配合（设计不止于好看，更关乎好用。—乔布斯）

有的组件设计出来太丑，程序员的眼光和一个专业的设计师的眼光仍是有必定差距的，因此若是能够的话能够请专业的设计师设计如下ui界面，在必定程度上能够吸引到别人。

组件设计参考点

组件间props原子化

父子组件经过 props 属性传值时，尽量的规定数据类型而且使用原始类型的数据。尽可能只使用 JavaScript 原始类型（字符串、数字、布尔值）和函数。尽可能避免复杂的对象。

有如下几点注意：

• 保证组件API清晰直观
• 更好的理解每个prop的含义和做用
• 传递过于复杂的对象使得咱们不可以清楚的知道哪些属性或方法被自定义组件使用，这使得代码难以重构和维护。
• 保证组件可用（防护性编程）

示例：

巧妙利用slot扩展组件

用好slot能够设计出不少优秀的组件。

合理使用mixin实现复用

Mixins封装可重用的代码，避免重复。若是多个组件共享相同功能，则可使用mixin。经过mixin，能够专一于单个组件的任务和抽象的通用代码。这有助于更好地维护应用程序。

及时模块化

在决定抽离成组件以前，先问一下本身下面几个问题：

• 是否有足够的页面结构/逻辑来保证它？
• 代码重复（或可能重复）？
• 它会减小须要书写的模板吗？
• 性能会收到影响吗？
• 你是否会在测试代码的全部部分时遇到问题？
• 你是否有一个明确的理由？
• 这些好处是否超过了成本？

当你明确了上面几个问题后，是否抽离组件相信你已经有了明确的答案。

如何设计组件？什么时候抽离组件？如何抽离一个合适的组件？都是一些设计原则加上实际经验相互做用下做出的判断，理论指导，实践判断。

最后用一段鸡汤文结尾：

在一天结束时，虽然你的直接责任多是“编写代码”，但你不该忽视你的最终目标，即创建一些东西。建立产品。为了产生一些你能够引觉得豪的东西并帮助别人，即便它在技术上并不完美，永远记得找到一个平衡点。不幸的是，在一周内天天 8 小时盯着眼前的代码会使得眼界和角度变得更为“狭窄”，这个时候你须要的你是退后一步，确保你不要为了一颗树而失去整个森林。

感谢各位大佬的阅读，读完但愿给点个赞再走哦，谢谢！🙏🙏🙏