这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
1.什么是组件
对于组件的定义在react和vue的官方文档中都有定义，我们知道：
react文档中的定义
- 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
vue文档中的定义
- 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
- 和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。Vue 同样也能很好地配合原生 Web Component。
2.组件化开发
- 组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。组件本身之间可能也有依赖关系，但一般不多。所以我们总结组件化开发的原则就是高重用，低依赖。当然这只是相对而言。
组件化的好处
- 组件化是对实现的分层，是更有效的代码组合方式。
- 组件化是对资源的重组和优化，从而使项目资源管理更合理。
- 组件化更有利于单元测试。
- 组件化对于重构比较友好。
如果说组件化框架是骨架，保证各个组件的独立性，那么业务就是灵魂。凝聚不同的部件。业务不仅仅需要输入输出的组件，需要一套能适应Web端的业务架构，保证业务与组件分离，这样业务才能高效重用，界面更换应该不影响前端的业务部分。
