2022年前端面试题(更新中...)

2022前端面试题整理(详细)更新中

一、基础部分

1.1、常用的块与行属性内标签有哪些?有什么特征?

块标签:div、h1~h6、ul、li、table、p、br、form。
特征:独占一行,换行显示,可以设置宽高,可以嵌套块和行
行标签:span、a、img、textarea、select、option、input。
特征:只有在行内显示,内容撑开宽、高,不可以设置宽、高(img、input、textarea等除外)

1.2、常见的盒子垂直居中的方法有哪些请举例3种?

利用子绝父相定位方式来实现

 

利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

 

flex 弹性布局来实现

1.3、Css优先级

!importent>行内> id> 类,伪类,属性>标签,伪元素选择器 > 继承和通配符

1.4、如何解决盒子塌陷?

父盒子设置上边距
overflow:hidden
子盒子脱标
父盒子上 padding

1.5、清楚浮动的方法?

父盒子设置高度
overflow:hidden
伪元素
双伪元素
在父盒子末尾添加一个空盒子,设置 clear:both

1.6、

二、js部分

2.1、== 和 ===的区别?

==是非严格意义上的相等。值相等就相等
===是严格意义上的相等,会比较两边的数据类型和值大小。值和引用地址都相等才相等

2.2、js数据类型有哪些,区别是什么?

基本类型:string,number,boolean,null,undefined,symbol,bigInt
引用类型: object,array
基本类型存储在栈中,空间小,操作频繁
引用数据类型存放在堆中,它的地址在栈中,一般我们访问就是它的地址

2.3、let和const 的区别是什么?

let 命令不存在变量提升,如果在 let 前使用,会导致报错
如果块区中存在 let 和 const 命令,就会形成封闭作用域
不允许重复声明
const定义的是常量,不能修改,但是如果定义的是对象,可以修改对象内部的数据

2.4、什么是防抖和节流,js 如何处理防抖和节流?

首先 防抖就是触发下一个事件时停止掉上一个事件
节流是 触发当前事件需要在上一个事件结束以后
通过设置节流阀(定时器)

2.5、什么是重绘和回流?

重绘:当元素内容以及布局没有发生改变,只是元素外观发生改变(background-color),就会重绘
回流:当一部分内容或者布局发生了改变,重新构建页面就会产生回流
产生回流一定会造成重绘,但是重绘不一定造成回流

2.6、

三、vue框架

3.1、Vue的生命周期都有哪些?

beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)
第一次页面加载时,会执行那些?
beforeCreate(创建前)、created(创建后)、beforeMount(载入前)、mounted(载入后)
如果使用了keep-alive会在多两个:activated、deactivated

3.2、vue双向数据绑定的原理?

mvvm场景:数据操作比较多的场景,需要大量使用DOM元素时,采用mvvm的开放方式,会更加便捷,让开发者更多的经历放在数据的变化上,解放繁琐的DOM元素
MVVM 模型,
M 数据 从后台获取的商品数据
V 视图 就是写好的页面,每一个div,每一个input 都是视图
VM 视图模型,
数据发生变化,通过视图模型会改变视图的显示,视图上的改变,也会通过视图模型进而影响数据的变化
核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法。

3.3、v-if 和v-show有什么区别?

相同点:都可以控制dom元素的显示和隐藏
不同点:v-show只是改变display属性,dom元素并未消失,切换时不需要重新渲染页面
v-if直接将dom元素从页面删除,再次切换需要重新渲染页面

3.4、v-for 循环为什么一定要绑定key ?

给每个dom元素加上key作为唯一标识 ,diff算法可以正确的识别这个节点,使页面渲染更加迅速!

3.5、Vuex 的 5 个核心属性是什么?

state => 基本数据
getters => 从基本数据(state)派生的数据,相当于state的计算属性
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
简述vuex数据传递过程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。 最后通过getter把对应值跑出去,在页面的计算属性中,通过,mapGetter来动态获取state中的值
mutations(修改state里面的数据,但是他只能执行同步的操作,异步必须写在action里面)
state(放数据)
action(执行异步操作)
getter(计算属性)
moudel(允许将单一store拆分多个store并且同时保存在单一的状态中)

3.6、请说出vue.cli项目中src目录每个文件夹和文件的用法?

assets文件夹是放静态资源;
components是方组件;
router是定义路由相关的配置
view是视图
app.vue是一个应用主组件
main.js是入口文件

3.7、promise是什么,有什么作用?

promise 是一个对象, 可以从改变对象获取异步操作信息
他可以解决回调地狱的问题,也就是异步深层嵌套问题

四、其他

你可能感兴趣的:(2022年前端面试题(更新中...))