前端开发-第一次正式面试复盘（紧张die我了）

文章目录

前言

本文记录笔者第一次正式面试前端开发岗位的面试题，面试中有些问题没有回答上来或者回答不够全面，特作复盘梳理，欢迎各位前辈及小伙伴在评论区指出不足或给予建议！
（×）回答错误
（-）回答不够全面或开放回答

项目相关

1.项目介绍

根据自己的实际项目经验回答

A：最近在和小组成员开发一个基于elementUI和vue2的项目管理系统，采用敏捷开发模式，现项目刚结束冲刺一阶段，我负责开发的是用户登陆、用户注册、管理员登陆、后台管理页面对阶段信息的增删改查这几部分内容。

2.开发中遇到的复杂的逻辑，影响深刻的难点

根据自己的实际经验来展开，笔者的开发经验较少，就说了一下遇到的问题以及后续开发的思路

我的开发经验还不算太多，没有遇到特别难的技术点。以下是我开发过程中出现过的一些问题及后续冲刺的开发思路。

开发过程中出现的问题：

• 在开发注册组件时使用了elementUI里包含表单验证的组件,官方文档里的说明有一些不是很详细,在实际运用中会出现一些bug,需要先分析代码的实现逻辑,在结合网上一些前辈的经验对实际代码进行更改。
• 在后台管理系统的开发中，涉及到学习方向>阶段>关卡的相关管理，例如，对某个关卡进行相关增删改查，向后台发送请求需要包含其对应的阶段ID及学习方向的ID，相关ID值需要通过其他组件获取，最后选择了路由传参及vuex的形式进行各组件间的通信。

后续冲刺的开发思路：

• 完善细节，提高用户体验，例如在验证码登陆时添加定时器控制用户点击发送验证码的频率，调整页面布局使其更加美观，添加适当的动画效果等；
• 为路由跳转添加守卫，判断用户及管理员权限；
• 考虑引用Echarts完成展示用户学习进度及项目开发情况的功能。
• 继续开发冲刺二的用户需求

Vue相关

3.vue生命周期,常用的生命周期

一个组件从创建到销毁的一系列过程就是一个生命周期，分为挂载阶段=>更新阶段=>销毁阶段。 每个阶段对应的钩子函数 挂载阶段：beforeCreate、created、beforeMounted、mounted 更新阶段：beforeUpdate、updated 销毁阶段：beforeDestroy、destroyed 。

最近常用的生命周期钩子就是mounted（挂载完成），可以在此函数中完成发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。
与之对应的是beforeDestroy（销毁之前），在此函数中进行清除定时器、解绑自定义事件、取消订阅消息等收尾工作。

4.v-if和v-for同时使用哪个最先执行(×)

1.v-for 优先于 v-if被解析 （源码角度分析）
2.如果同时出现，每次渲染都会先执行循环在判断条件，无论如何循环都不可以避免，浪费了性能
3.避免这个情况，外层嵌套template，在这一层进行v-if判断，在内部进行v-for循环
在Vue3中好像对此进行了改进，不允许两个命令使用在同一元素上。

5.对MVVM的理解

M：模型（model）：对应data中的数据
V：视图（View）：模板
VM：视图模板（ViewModel）：Vue实例对象

6.组件间的通信方式

• 自定义事件
• props
• $ref.xxx.on
• 全局事件总线
• 消息订阅与发布
• 插槽
• vuex
• 路由

7.vue-router路由传参有哪几种方式(-)

• 利用query参数传参
• 利用params参数传参
• props配置

js基础

8.遇到过节流和防抖吗(-)

• 函数防抖：原理就是维护一个计时器，规定时间后触发函数，但是在规定时间内再次触发的话，就会取消之前的定时器重新设置，这样只有最后一次操作才会被触发。
• 函数节流：在一定时间内只触发一次函数，原理是通过判断是否到达一定时间来触发函数。
• 两者的区别： 节流是不管事件触发多频繁，保证规定时间内一定会执行一次真正的事件处理函数； 防抖只是在最后一次事件后才触发函数。在页面的无线加载场景下，我们需要用户在滚动页面时，每隔一段事件发一次AJAX请求，而不是在用户停止滚动页面操作才去请求数据。这种就需要节流来实现。

9.ES6新特性

• let 块级作用域,不存在变量提升,值可改变 const 块级作用域,不存在变量提升,值不可改变 声明常量时必须赋值
• 箭头函数 箭头函数最大的特点就是没有this，所以this是从外部获取，就是继承外部的执行上下文中的this，由于没有this关键字所以箭头函数也不能作为构造函数， 同时通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），第一个参数会被忽略。箭头函数也没有原型和super
• 解构赋值 解构赋值就是把数据结构分解，然后给变量进行赋值
• 剩余参数
• 扩展运算符
• 新增两种数据类型 BigInt，这种数据类型的特点就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题。 Symbol是ES6新出的一种数据类型，这种数据类型的特点就是没有重复的数据，可以作为object的key …

10.目前用过用过哪些特性

根据自己的实际经验回答

11.Ajax传参类型(×)

• 对象
• json
• jsonp

12.Ajax有遇到跨域问题吗(–)

跨域解决办法

• 后端解决
• jsonp
• 代理服务器

CSS相关

13.position常用属性,大概区别(–)

• （常用） relative 相对定位 占有位置
• （常用）absolute 绝对定位 脱标不占位置 常用于调整元素显示位置 子绝父相
• （常用）fixed 固定定位 脱标不占位置 可以在浏览器页面滚动时元素的位置不会改变（返回顶部按钮）
• static 静态定位 几乎不用
• sticky 粘性定位1.以浏览器的可视窗口为参照点移动元素（固定定位特点） 2.粘性定位占有原先的位置（相对定位特点） 3.必须添加 top 、left、right、bottom 其中一个才有效 跟页面滚动搭配使用。 兼容性较差，IE 不支持。

14.float与flex的区别(–)

• float是让自己进行浮动
• flex相当于是让子元素进行浮动

flaot会带来的影响：
后续标准流被覆盖
父级盒子高度塌陷
需要清除浮动，清除浮动的方法：

• 额外标签法
• 父级添加overflow属性
• 父级添加after伪元素
• 父级添加双伪元素

后话

以上就是笔者第一次正式面试中遇到的问题，主要是看基础扎不扎实。
放平心态不要紧张控制语速（不然你都不知道自己在说什么 T ^ T）
总之革命尚未成功，同志任需努力！慢慢加油吧！

最后祝大家面试顺利，早日找到心仪工作 (๑•̀ㅂ•́)و✧