2021年前端热门面试题

什么是MVVM？

他是一种模式,用来简化用户界面的本质是model 数据 view 视图viewmodel 视图和数据的桥梁的简写

请详细说下你对vue生命周期的理解？

beforeCreate() 创建前 created()创建完成
beforeMount() 挂载前 mounted()挂载完成
beforeUpdate() 更新前 updated()更新完成
beforeDestroy() 销毁前 destroyed()销毁完成

说明原生Ajax的实现步骤？并解释步骤的含义？

创建对象
Var ajax=new XMLHttpRequest()
监听状态
ajax.onreadystatechange=function(){
if(ajax.readyState=4&& ajax.Status==200){
console.log(conspones)
}
}
设置请求方式和请求地址
ajax.open(‘get’,’1.php’)
发送请求
ajax.send()

vuex是什么？怎么使用？哪种功能场景使用它？

vuex是一种集中式状态管理模式

应用场景: 单页面应用中,组件之间的状态,音乐播放器,加入购物车,注册登录

组件中 data computed 和 watch的区别？

data:Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
Computed：是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算
Watch：是调用一次执行一次如果监听数据变化都会执行回调

vue 中遍历数据为什么要绑定key值？绑定key值能否使用数组索引？说明其原因
因为虚拟dom有一个diff算法,key是唯一的,不会让数据产生混乱,可以高效更新的虚拟dom
不能使用数组索引因为当删除一条数据时,他的索引也会发生变化,会让数据产生混乱
怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在path路径后加:id或者:name 属性
在模板中接收{{$route.params.name}}

vue-router有哪几种导航钩子？
全局导航钩子
单独路由独享钩子
组件内钩子
vuex中有哪些属性（5个）？请说明各属性的特性和作用？

state：vuex的基本数据，用来存储变量
getter：从基本数据(state)派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
　　回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

整个项目中只有一个页面
优点:用户体验好,单页面对服务器压力小
缺点:刚开始运行消耗时间长,页面内容繁琐,代码不清晰不易维护

解释webpack4个核心概念？为什么要使用webpack?

入口(entry) 输出(output) loader 插件(plugins)
他有模块化,大大提高了开发效率,简化代码,优化性能

组件中 data 为什么是一个函数？

组件是可以复用的,如果data是对象的话,引用这个组件都会引用一遍数据会产生数据污染,函数会产生独立的区域,互不影响

谈谈你This对象的理解?

This是一个对象,在不同的场合下this的指向不同
一般情况下,this指向全局
在函数中,谁调用this指向谁
在构造函数中,this指向实例化对象
在严格模式下,this指向undefined

什么是闭包，谈谈你对的闭包的理解。

函数嵌套函数
里面的变量会引用外面的变量
被使用的变量不会被垃圾回收机制回收,会导致内存泄漏

前端请求数据的过程中为什么出现跨域？如何解决跨域问题？ES6有哪些新增的属性和方法。

违反了同源策略(同端口,同域名,同协议)
修改请求头协议, 用php访问 ,用jsonp解决
模板字符串,symbol ,数组方法 ,class promise let const

var、let、const之间的区别。
- Var :定义变量 ,没有块的概念,可以跨函数访问,有全局变量和局部变量,可以将变量提升

Let : 定义变量有块级作用域,里面的变量不能在外面使用,不能将变量提升,以{}生成块级作用域
Const: 定义是必须有初始值,一旦定义就不能修改,数组可以用函数,对象用下标修改

ES6里面解决异步回调地狱的方案有哪些，简单描述下？

Async   promiase
Async function aa(){
await ‘11’,
return  ‘hahha’
}
var bb=new aa();
Bb.then(function(d){
console.log(d)
})

ECMAScript 6 怎么写 class ，为何会出现 class？

ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

class aa{
constructor(name,age){
this.name=name;
this.age=age;
}
var cc=new aa(‘zhangsan’,18)
 class  bb extends aa(){
constructor(name,age){
super(name,age)

}}
}

页面元素隐藏方式和各自特点？

display属性为none，效果：元素不显示，不占位
设置css visibility属性为hidden，效果：元素不显示，但占位
z-index:-1 元素隐藏，但它是将自身置于其他元素下面

用过哪些盒模型？

标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

边界重叠是什么?CSS中margin外边距会出现那些重叠情况？如何处理？

边界重叠: 是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

底边界与顶边界重叠
元素的底边界与前面元素的顶边界重叠
元素的顶边界与父元素的顶边界重叠
解决办法:
外层元素用padding代替
外层元素用overflow:hidden;
内层元素加float:left或者 display:inline-block
内层元素 border:1px solid transparent;
内层元素:position:absolute;

什么是Sass,使用sass目的是什么？

Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。
Sass 能够帮助复杂的样式表更有条理，并且易于在项目内部或跨项目共享设计。
sass预处理可以更好地组织管理越来越复杂而庞大css样式表。
sass的易维护，更方便的定制，以及更高效的开发项目

js基本数据类型是什么？如何判断该类型数据？数据类型强制转化和隐式转化的区别？

Number、String、 boolean、 Undefined、Null

使用1、typeof、2、instanceof、3、constructor、4、Object.prototype.toString.call()、5、jquery.type()查看该类型

隐式转换都是以强制转换为基础的。强制转换主要指使用一些特定函数，手动将各种类型的值，转换为其对应的类型

如何判断一个对象是否具备某个属性？如何判断对象为空对象？

使用“!==”进行判断
使用in操作符，如果返回ture则存在
hasOwnProperty()
propertyIsEnumerable() 是hasOwnProperty() 的增强版

使用JSON.stringify把对象转为字符串,再判断字符串是否等于"{}"

在CSS中当自身设置绝对定位父级元素没有相对定位时，自身依据什么元素来定位？
父元素为绝对定位,子元素还是按照父元素定位.
父元素无定位,则以浏览器为准定位
如何判断JS数据的类型？说明基本数据类型和引用数据类型的区别？

Typeof construcuor instanceof

基本数据类型存放在栈中的简单数据段,引用数据存放在堆内存的对象
基本数据类型大小确定,内存大小可以分配,引用数据类型每个空间大小不一样,要根据情- 况进行特定的配置
传递的参数不同,基本数据类型是把变量里的值传递给参数,参数变量互不影响,引用数据类型:对象变量里面的值是这个对象在堆内存的内存地址(内外相互影响)
基本数据类型按值访问,引用数据类型通过指针访问

11.请代码示意解构赋值和运算符展开？并说明其优势

Var  [a,b,] =[10,20];
[b,a]=[a,b]
Var  aa={name:”张三”}
Var bb=aa;
Var bb.name=李四;
Console.log(...bb)

解构赋值作用: 可以同时给多个变量赋值在不使用第三方变量的前提下,可以交换两个变量函数中可以用解构赋值的方式return 返回值,同时可以给多个变量赋值

运算符: …相当于深拷贝,存在不同的地址,互相不影响

Vue 如何获取到 dom 节点？
1. 使用DOM API直接找元素原生dom操作(getElementById)
2. ref属性 this.$refs.属性
3. 特殊的this. $r o o t 、 t h i s .$ parent、this.$children
Vue 中遍历数据为什么要绑定key值？绑定key值能否使用数组索引？说明其原因

因为虚拟dom有一个diff算法,key是唯一的,不会让数据产生混乱,可以高效更新的虚拟dom

不建议使用索引作为key,可以使用唯一id作为key

原因：如果在一个数组中插入某一个值，vue识别后会从新分配后续索引，速度变慢, 当删除一条数据时,他的索引也会发生变化,会让数据产生混乱

解释什么叫回调地狱，以及怎么解决回调地狱？

就是函数作为参数层层嵌套

怎么解决:

通过promise链式调用的方式

function buildCatList(list, returnVal) {
    return new Promise(function (resolve, reject) {
        setTimeout(function (name) {
            var catList = list === '' ? name : list + ',' + name
            resolve(catList)
        }, 200, returnVal)
    })
}

buildCatList('', 'Panther').then(function (res) {
	return buildCatList(res, 'Janguar')
}).then(function (res) {
	return buildCatList(res, 'Lion')
}).then(function (res) {
	console.log(res)
})本质上还是函数套函数

keep-alive的是什么？使用它的目的是什么？

是一个内置组件

可以使被包含的组件保留状态避免重新渲染

懒加载和热更新怎么配置？

懒加载其实就是延时加载，即当对象需要用到的时候再去加载。
懒加载：先在页面中把所有的图片统一使用一张占位图进行占位，地址存放到其它属性(data-original)中，把正真的路径存在元素的“data-url”属性里，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

热更新：

修改代码时不用刷新直接可以看到修改后的内容
在项目使用webpack,只需要webpack-dev-server插件就可以实现项目的热更新
安装：npm i webpack-dev-server -D
配置webpack.config.js
在package.json的script添加webpack-dev-server
启动npm run server查看