web前端面试题2021年

1.Flex布局让div水平垂直居中的写法：

为该div设置宽和高，该div的父级元素设置关键字display:flex; justify-content:center; align-items:center;

2.清楚浮动的方法；

1）给父元素添加overflow:hidden;属性。

2）通过属性clear:both;达到清除浮动的目的。

3）通过给父级元素添加伪类after，达到清除浮动的目的。

4）使用双伪类清除浮动。”

3.数组常用的API；

forEach //遍历数组的所有元素

every //用来判断所有的数组元素，都满足一个条件

some //用来判断所有的数组元素，只要有一个满足条件即可

sort  //排序

map  //将元素重新组装，并返回

filter  //通过某一个条件过滤数组

4.undefined与null的区别；

undefined表示一个变量没有被声明，或者被声明了但没有被赋值（未初始化），一个没有传入实参的形参变量的值为undefined,如果一个函数什么都不返回,则该函数默认返回undefined；

null是一个表示“没有值”的值；

Javascript将未赋值的变量默认值设为undefined；

Javascript从来不会将变量设为null。它是用来让程序员表明某个用var声明的变量时没有值的；

undefined不是一个有效的JSON，而null是；

undefined的类型(typeof)是undefined；

null的类型(typeof)是object. ；

它们都是基本类型；

他们都是falsy (Boolean(undefined) ->// false, Boolean(null) ->// false)；

你可以这样判断一个变量是否是undefined。typeof variable === "undefined"；

你可以这样判断一个变量是否是null。variable === null；

双等号比较时它们相等（null==undefined ->// true），但三等号比较时不相等（null===undefined ->// false）；

5.数组常用的去重的方法；

（1）最简单数组去重法

实现思路：

* 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中

* IE8以下不支持数组的indexOf方法

（2）优化遍历数组法

实现思路：获取没重复的最右一值放入新数组。

（3）数组下标法

实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，

* 那么表示第i项是重复的，忽略掉。否则存入结果数组。

（4）排序后相邻去除法

实现思路：

* 给传入数组排序，排序后相同值相邻，

* 然后遍历时,新数组只加入不与前一值重复的值。

* 会打乱原来数组的顺序

5.vue常用的自定义指令；

内置的自定义指令：v-if，v-for等；

封装自定义指令，在src目录下新建directives目录，然后新建对应js文件,在自定义的js文件中export。其次，在要引用的地方import，然后在directives中注册组件。最后，在要应用的父级中以v-xx的形式引用并且配置，在新建的js文件中实现对应的逻辑。

自定义指令常用的钩子函数：

bind: // 指令第一次绑定到元素时调用；

inserted: // 被绑定元素插入父节点时调用；

update：//所在组件的 VNode 更新时调用;

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用;

unbind：只调用一次，指令与元素解绑时调用。

钩子函数会被传入以下参数：

el：//指令所绑定的元素；

binding{

name,

value,

oldValue,

expression,

arg,

modifiers} //对象

vnode： vue编译生成的虚拟节点；

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

6.vue常用的插件；

https://www.cnblogs.com/aidixie/p/10026590.html

7.vue的实现原理；

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

8. computed和watch的用法和区别；

computed:

1)支持数据的缓存。

2)函数内部的数据改变也会触发。

3)不支持异步，当computed内部有异步操作时computed无效

4)如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般用computed

5)computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

watch:

watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些操作

1)不支持缓存

2)支持异步

3)只可以设置一个函数，可以带有两个参数

4)监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作

9. 请详细说下你对vue生命周期的理解；

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

10. 请说下封装 vue 组件的过程；

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

11. 你是怎么认识vuex的；

vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

12. vuex的5个属性；

Vuex有五个属性 state  getters  mutations  actions  modules

State就是数据源存放地，对应一般vue对象的data，state里面存放的数据是响应式的，state数据发生改变，对应这个数据的组件也会发生改变  用this.$store.state.xxx调用

Getters 相当于store的计算属性，主要是对state中数据的过滤，用this.$store.getters.xxx调用

Mutations 处理数据逻辑的方法全部放在mutations中，当触发事件想改变state数据的时候使用mutations，用this.$store.commit调用，给这个方法添加一个参数，就是mutation的载荷（payload）

Actions 异步操作数据，但是是通过mutation来操作 用this.$store.dispatch来触发，actions也支持载荷

使用场景：组件之间的状态，登录状态，加入购物车，音乐播放

13. Vuex使用流程；

下载vuex 

在src下创建store以及index.js

引入vue和vuex， 使用vuex  ，导出实例对象

在main.js中引入，在.vue文件中使用

14. vue-router实现原理；

实现这一点主要是两种方式:

（1）Hash: 通过改变hash值

（2）History: 利用history对象新特性

15. active-class是哪个组件的属性？嵌套路由怎么定义；
vue-router模块的router-link组件。

16. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数； 
在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id

 17. vue-router有哪几种导航钩子；
三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子；

第三种：单独路由独享组件。

18. vue中的内置组件；

1）component组件：有两个属性---is    inline-template

渲染一个‘元组件’为动态组件，按照'is'特性的值来渲染成那个组件

2）transition组件：为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件

3）transition-group：作为多个元素/组件的过渡效果

4）keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

5）slot：作为组件模板之中的内容分发插槽，slot元素自身将被替换

19. vue中的内置组件keep-alive的用法；

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

20. vue中混合机制--mixins的作用；

多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。