乐趣区

关于前端:2022年前端面试题更新

jiezi

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、常见的盒子垂直居中的办法有哪些请举例 3 种？

二、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 如何解决防抖和节流？

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

三、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 是一个对象，能够从扭转对象获取异步操作信息
他能够解决回调天堂的问题，也就是异步深层嵌套问题

四、其余

退出移动版