前言

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

项目相关

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 不支持。