前端为什么要组件化开发？

=======================================================================

最开始接触组件化的思想是通过写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，甚至其它的组件

插槽可以有默认内容，

default info

具名插槽

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

注意 v-slot 只能添加在 上

变量作用域：

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

组件传值

===================================================================

1. 父组件通过自定义属性向子组件传值，子组件通过props 接收

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！