web前端真实面试题自整理（自用，可借鉴）

1. 你们项目是如何开发的?

开发前会有需求分析会，会分析业务需求，项目经理会给一个原型图，UI会根据原型图发给我们一个设计稿，我们拿到设计稿以后就可以进行页面样式的实现，然后就是根据原型图里的功能来实现功能，这时候我们一般都会先用虚拟数据进行对页面进行填充，以及功能实现，等后端把接口文档发给我们以后我们就可以进行接口的测试，以及真实数据的渲染，基本上所有的功能和所有的数据都完成以后，就交给测试去检查问题，测试到问题后我们再对问题进行修改，然后交给测试进行二次测试，最后没有问题的话就会交给项目经理进行最后的检查。

2. 你们为什么用vue开发?为什么不用react?

 因为公司大部分的人用的都是vue，如果在用react进行开发的话，大部分的人都需要重新学习，学习成本就非常的高，所以就随大流吧，就一直用的都是vue的，但是我自己在空闲时间也开始看一些关于react的一些课程了，虽然也才刚开始看，刚了解了一点点基本的语法。

3. 说一下你在项目中是如何封装组件的?有没有什么需要注意的?

在src中新建一个computent文件夹，用来存放我们的组件，组件编译完成后使用export default导出,然后再使用组件的一方使用import导入，然后进行组件的注册，然后将注册的组件名作为标签使用。
需要注意的是：组件之间的通信问题 

4.scss和less的区别

编译环境不同，scss是在ruby环境，在服务端做处理，而less需要引入less..js文件来处理less代码

变量符不一样，scss是$，less是@

5.项目中的编码规范怎么统一

每个程序员的编码习惯都不一样，但是在公司开发的时候，如果代码不规范的话，就会导致后期不好维护，联合开发的时候别人也不好看懂，所以需要统一代码规范，这时候就可以用esLint，他提供了编码规范，并且自动检测代码的规范性，如果不规范的话会报错提示，并且会打印检验结果，告诉你那个文件的哪行代码不规范，方便修改

6.reactive和ref

他们两个都是Vue3用来数据的双向绑定的 ，reactive的话一般用来传递复杂一点的数据，直接传入一个state对象，然后把这个state对象return出去，就可以在页面中直接使用，如果在js里边使用的话是需要使用state.msg

而ref是用来传递简单的数据，也是需要return返回，但是如果在js里边使用的话是需要使用msg.value

7.body体传输数据格式

1.form-data 用来传输表单数据和上传文件

2.application是以键值对的数据格式进行提交

3.raw可以上传任意格式的文本，可以上传text、json、xml、htm

4.binary只能上传二进制数据，通常用来传输文件，由于没有键值对，一次只能上传一个文件

8.前端组件化、工程化、模块化概念

组件化就是拆组件开发，把一些重复使用的样式统一的一些片段当成组件拆分出去，使用的时候直接调用组件就可以，可以避免代码的复用，方便维护

模块化就是一个项目分为多个模块，方便多人开发，联合开发，各负责各的模块

工程化就是通过vue的脚手架，作者已经把开发环境下的东西都配置好了，在安装脚手架的时候把我们需要用到的功能都下载上就可以了，然后我们就可以在这个架子里进行项目的开发

9.echarts图表适配

通过window的onresize事件监听窗口大小的变化，然后调用Echarts实例对象的resize方法，就可以实现当窗口变化的时候，图表大小也跟着变化

10.环境变量

项目开发的时候我们都会经历开发环境，测试环境和生产环境三个阶段，不同阶段 的 请求状态都是不同的，如果我们手动切换的话是非常麻烦的，所以就可以配置环境变量

首先就是在根目录创建三个env文件

env.development 开发环境

env.production 生产环境

env.test 测试环境

就比如我们在进行文件抽离的时候就可以进行判断，判断process.env.NODE_ENV === 'production' 当前是生产环境或者 process.env.NODE_ENV === 'development当前是开发环境，如果生产环境就需要进行大型文件的抽离，还有进行一些别的打包优化的操作，如果是生产环境的话，为了开发效率，就不需要进行大型文件的抽离，也不需要考虑打包优化，就正常操作就可以了。

11.微信调用手机拨号功能

 

12.微信调用客服功能

<contact-button> </contact-button>拉起客服

13.微信获取当前登录用户手机号