Web前端最全前端为什么要组件化开发？，面试题目及答案

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 组件：

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

组件的出现，就是为了拆分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 接收

2. 子组件通过 $emit 触发自定义事件，通过回传参数向父组件传值，父组件通过此事件调用的函数来接收参数

3. 非父子组件无法直接传值，建议将需要传递数据的子组件，都合并为一个组件。如果一定要传，可以先传到父组件，再传到子组件，或者创建一个公共的vue实例，在两个组件分别引入，作为沟通桥梁。如果数据较多，一般使用vuex进行统一状态管理。

组件库

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

推荐几个vue常用的组件库

vant：https://youzan.github.io/vant/#/zh-CN/

element：https://element.eleme.cn/#/zh-CN/component/installation

iview UI ：https://www.iviewui.com/docs/introduce

结语

酸狗今天就分享这些，那么下次见~

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】