2022年前端面试题（更新中...）

小健 - 2022-10-26 01:39:21

---

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种？

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

 <style>
        .container{
            width: 300px;
            height: 300px;
            position: relative;
        }
        .conter{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

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

 <style>
        .container{
            position: relative;
        }
        .conter{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

flex 弹性布局来实现

<style>
        .container{
         display: flex;
         justify-content: center;
         align-items: center;
        }
        .conter{
            
        }
    </style>

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 是一个对象， 可以从改变对象获取异步操作信息
他可以解决回调地狱的问题，也就是异步深层嵌套问题

四、其他

Tags 标签

前端css3html5vue.jsjavascript

扩展阅读