前端为什么要组件化开发？_前端开发为什么要封装组件库-CSDN博客

本文链接：https://blog.csdn.net/qq_39765048/article/details/121158896

本文探讨前端开发中的模块化、组件化和工程化概念，强调组件化带来的代码复用、开发效率提升和维护成本降低。组件和模块的区别在于，组件注重代码重用，模块则更侧重功能整合。插槽用于自定义组件内容，而组件间通信通过props和事件实现。推荐的组件库有Vant、Element和iView。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是前端模块化，组件化，工程化？

在这里插入图片描述

可以理解为一组自定义业务的抽象封装，是根据项目的情况来进行封装组合到一起的，比如我们可以分为登录模块，评论模块。模块可维护性好，组合灵活，方便调用，多人协作互不干扰。

指对具体的某个功能的封装，比如所有的分页可以封装为分页组件来统一使用，以此来达到组件复用，提高开发效率。

概念：指使用软件工程的技术和方法来进行前端项目的开发、维护和管理。

在这里插入图片描述

最开始接触组件化的思想是通过写react。随着做的项目越来越多，组件化的思想显得越来越重要。

在正常的业务场景下，我们会对项目做这样的分层。

基础组件：
所谓基础组件，我们也可以把它理解成widget，也就是元件。比如Input，Button，AutoComplete等等。它们可以被用在任何地方。
业务组件：
我理解的业务组件也就是component，这些组件由基础组件构成，根据不同的业务场景需要，形成了带有数据，带有逻辑的业务组件。当然这些业务组件同样可以被抽象成一个能够被多个模块组件使用的组件，比如页面底部fix的footer，它可能集成了首页模块，用户信息模块，产品列表模块的跳转信息等，所以每个模块都需要拥有它。
模块组件：
这是我们根据具体的业务需求具体出的一个一个的模块，比如登录，商品详情页等等。它是业务组件与基础组件的集成。

所以回到最原始的问题，我们为什么要做组件化，通过上面的这种拆分，我们不难看出，组件化可以让我们的代码低耦合，我们不用像传统开发一样把所有的东西都揉在一起，从而极大的提高了我们的开发效率。同时我们避免了重复造轮子，提高了我们的代码质量，降低了维护的成本。

在这里插入图片描述

最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块将来我们需要什么样的功能，就可以去调用对应的组件即可，侧重于代码重用

最初的目的是将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的。

侧重于功能划分
在这里插入图片描述
和组件模块近似的一对概念是库和框架。库的概念偏近于代码的堆集，是分层的概念，所以对应组件化。框架是结构化的代码，所以应用于模块化。框架是骨，模块化是肉。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

export命令用于规定模块的对外接口。
export default命令，为模块指定默认输出。

export与export default命令的区别：export 时，import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import { lastName as surname } from './profile.js';

而export default输出时，其他模块加载该模块时，import命令可以为该匿名函数指定任意名字，而且可以不用大括号
一个模块只能有一个默认输出，因此export default命令只能使用一次。而export可以有多个输出，按需引入

slot插槽允许我们在调用组件的时候添加自己的内容
正常情况下，组件标签之间的内容会被忽略，使用插槽可以把标签之间的内容渲染到指定位置
插槽内可以包含任何模板代码，包括 HTML，甚至其它的组件
插槽可以有默认内容，

<slot>default info</slot>

具名插槽

给slot标签加name属性，在template中使用v-slot:name 的形式给不同的插槽对应不同的内容
注意 v-slot 只能添加在上

变量作用域：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

父组件通过自定义属性向子组件传值，子组件通过props 接收
子组件通过 $emit 触发自定义事件，通过回传参数向父组件传值，父组件通过此事件调用的函数来接收参数
非父子组件无法直接传值，建议将需要传递数据的子组件，都合并为一个组件。如果一定要传，可以先传到父组件，再传到子组件，或者创建一个公共的vue实例，在两个组件分别引入，作为沟通桥梁。如果数据较多，一般使用vuex进行统一状态管理。