2020年Web前端面试题汇总(一)

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。

1说几条写JavaScript的基本规范

1)不要在同一行声明多个变量;

2)请使用===/!==来比较true/false或者数值;

3)使用对象字面量替代newObject这种形式;

4)减少使用全局函数,全局变量;

5)switch语句必须带有default分支;

6)if语句必须使用大括号;

7)for-in循环中的变量;

应该使用var关键字明确限定作用域;

从而避免作用域全局污染。

2说说平衡二叉树

平衡二叉搜索树(Self-balancingbinarysearchtree)

又被称为AVL树。

具有以下性质：

1)它是一棵空树或它的左右两个子树

的高度差的绝对值不超过1，

并且左右两个子树都是一棵平衡二叉树。

2)平衡二叉树必定是二叉搜索树，反之则不一定。

3)平衡二叉树的常用实现方法有红黑树、AVL、

替罪羊树、Treap、伸展树等。

最小二叉平衡树的节点的公式如下：

F(n)=F(n-1)+F(n-2)+1备注：1是根节点，

F(n-1)是左子树的节点数量，

F(n-2)是右子树的节点数量。

3清除浮动和解决垂直外边距重叠的解决方案

问题描述:

1)父元素没有设置宽高，尺寸由子元素撑起;

子元素一旦浮动，父元素高度会发生塌陷。

2)子元素设置margin-top会作用的父元素的margin-top;

此时会造成垂直外边距重叠。

clearfix::after,clearfix::before{

content:'';

display:table;

clear:both;

}

4sessionStorage、localStorage和cookie

相同点:

都用于浏览器端存储的缓存数据;

不同点:

1)存储内容是否发送到服务器端

当设置了Cookie后，数据会发送到服务器端，

造成一定的宽带浪费;xxxstorage则会将数据保存

到本地，不会造成宽带浪费;

2)数据存储大小不同

Cookie数据不能超过4K，适用于会话标识;

xxxstorage数据存储可以达到5M;

3)数据存储的有效期限不同

cookie只在设置了Cookid过期时间

之前一直有效，即使关闭窗口或者浏览器;

sessionStorage,仅在关闭浏览器之前有效;

localStorage,数据存储永久有效;

4)作用域不同

cookie和localStorage是在同源同窗口中

都是共享的;

sessionStorage不在不同的浏览器窗口

中共享，即使是同一个页面;

5判断一个单词是否是回文

回文是指把相同的词汇或句子，

在下文中调换位置或颠倒过来，

产生首尾回环的情景，

叫做回文，也叫回环。

比如cacac，redivider。

letcheckPalindrom=(str)=>{

returnstr===

strsplit('')reverse()join('');

}

6不借助临时变量，进行两个整数的交换

输入a=3,b=1,

输出a=1,b=3

letswap=(a,b)=>{

b=b-a;

a=a+b;

b=a-b;

return[a,b];

}

7请写出至少5个html5新增的标签，并说明其语义和应用场景

section：定义文档中的一个章节;

nav：定义只包含导航链接的章节;

header：定义页面或章节的头部;

它经常包含logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部;

它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容，

如果被删除，剩下的内容仍然很合理。

8get和post请求在缓存方面的区别

get请求类似于查找的过程，用户获取数据，

可以不用每次都与数据库连接，所以可以使用缓存。

post不同，post做的一般是修改和删除的工作，

所以必须与数据库交互，所以不能使用缓存。

因此get请求适合于请求缓存。

9如何解决异步回调地狱

promise、generator、async/await

10的懒加载和预加载

预加载：提前加载，

当用户需要查看时可直接

从本地缓存中渲染。

懒加载：懒加载的主要目的

是作为服务器前端的优化，

减少请求数或延迟请求数。

两种技术的本质：

两者的行为是相反的，

一个是提前加载，

一个是迟缓甚至不加载。

懒加载对服务器前端有一定

的缓解压力作用，

预加载则会增加服务器前端压力。

11bind，apply，call的区别

通过apply和call改变函数的this指向，

这两个函数的第一个参数都是一样的，

表示要改变指向的那个对象，

第二个参数，apply是数组，

而call则是arg1,arg2这种形式。

通过bind改变this作用域

会返回一个新的函数，

这个函数不会马上执行。

12js怎么控制一次加载一张，加载完后再加载下一张

方法一:

varobj=newImage();

objsrc="#/21jpg";

objonload=function(){

documentgetElementById("pic")

innnerHTML="";

}

加载中

博客园整理了一下，有好的面试题欢迎大家发在评论区哟

1 闭包

2 数组去重

3 原型和原型链

4 call,apply,bind三者的区别？

5 请介绍常见的 HTTP 状态码(至少五个)

6 深浅拷贝

7 实现(5)add(3)minus(2)输出6

8 null和undefined区别

9 MVC和MVVC

10 Vue生命周期

11 Vue数据双向绑定原理

12 Vue组件传参

13 说说各浏览器存在的兼容问题

14 router和route

15 active-class属于Vue哪一个modules,有什么作用

16 v-if和v-show

17 computed和watch有什么区别

18Vue 组件中 data 为什么必须是函数

19 vue中子组件调用父组件的方法

20 vue中 keep-alive 组件的作用

21 vue中如何编写可复用的组件？

22 Vue 如何去除url中的 #

23 Vue 中 key 的作用

24 Vue 中怎么自定义指令

25 Vue 中怎么自定义过滤器

26 NextTick 是做什么的

27 Vue 组件 data 为什么必须是函数

28 计算属性computed 和事件 methods 有什么区别

29 scoped（死够扑的）

30 vue如何获取dom

31 promise

32 vue常用指令有哪些

33vue-loader是什么使用和用途？

34css样式局部化，如何让css只在当前组件起作用scss和stytus样式穿透

闭包指有权访问另一个函数中变量的函数，

MDN: https://developermozillaorg/zh-CN/docs/Web/JavaScript/Closures

B站视频： https://wwwbilibilicom/video/BV1YJ411R7apfrom=search&seid=18157596230752413126

https://wwwjianshucom/p/9c3547450a52

https://searchbilibilicom/allkeyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC

都是用来改变this指向的

call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的

一般情况下this指向其调用者（）

funcall(thisArg,arg1,ary2,)

主要作用可以实现继承

调用函数，改变this指向

继承

funapply(thisArg,[argsArray])

作用：调用函数，改变函数内部this指向

参数必须是数组

apply主要应用于借助数学对象等

bind()方法不会调用函数，但可以改变函数内部this指向

funbind(thisArg,arg1,arg2,)

thisArg:在fun函数运行时指定的this值

arg1，arg2:传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝

call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call

时间测试

状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

阮一峰： http://wwwruanyifengcom/blog/2014/03/undefined-vs-nullhtml

MVC 是后端中的概念

MVVC中 是前端概念

最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

active-class 属于vue-router的样式方法

当routerlink标签被点击时将会应用这个样式

使用有两种方法

routerLink标签内使用

在使用时会有一个Bug

首页的active会一直被应用

解决办法

为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

在router-link中写入exact

在路由js文件,配置active-class

还可以不用exact这种方法去解决，例如

首页

路由中加入重定向

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

去这里看一下​blogcsdnnet

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history

new Router({

mode: 'history',

routes: [ ]

})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 indexhtml 页面

具体参考 官方API

参考 官方文档-自定义指令

过滤器也同样接受全局注册和局部注册

具体可参考官方文档 深入响应式原理

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

让css只在当前组件中起作用

今天小编要跟大家分享的文章是关于参加Web前端面试的常见面试题汇总。准备参加Web前端面试的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1渐进增强与优雅降级

渐进增强

并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。

优雅降级也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想的区别在于：

1渐进增强是向上兼容，优雅降级是向下兼容;

2渐进增强是从简单到复杂，优雅降级是从复杂到简单;

3渐进增强关注的是内容(保证核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)

2DOCTYPE

作用

DTD(DocumentTypeDefinition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML

的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。

DOCTYPE是用来声明文档类型和DTD

规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5的文档类型声明：

HTML401Strict(HTML401严格模式)的DTD包含所有HTML

元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：

-//W3C//DTDXHTML10Strict//EN"

"http://wwww3org/TR/xhtml1/DTD/xhtml1-strictdtd">

标准模式与怪异模式

怪异模式(Quirks

Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的

DOCTYPE都会触发怪异模式。

浏览器使用文件开头的DOCTYPE来决定用怪异模式处理或标准模式处理。DOCTYPE

可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。

怪异模式与标准模式的主要区别：

1怪异模式的宽度和高度会包含padding和border。标准模式不包含，标准模式下可以通过设置box-sizing:

border-box将标准盒模型转化成怪异模式下的盒模型。

2怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。

3怪异模式下，在表格中的字体样式(如font-size)不会继承。

4怪异模式下颜色值必须使用十六进制标记法。

3语义化

HTML5

中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而CSS

样式控制内容的呈现，像元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。

优点

·使得HTML文档结构清晰、布局合理、主体突出、可读性更强。

·有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。

·方便其他设备解析，如盲人阅读器根据语义渲染网页。

·有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

语义化标签

·定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器;

·footer内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息;

·article

文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目;

·nav描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表;

·section表示文档中的一个区域(或节)，比如，内容中的一个专题组;

·main定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站

logo，搜索框(搜索框作为文档的主要内容);

·aside

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

4超链接伪类

:link、:visited、:active和:hover的声明顺序是怎样的

:link表示未访问的链接状态;

:visited表示已访问状态;:active表示激活状态(鼠标按下);:hover表示悬停状态。

推荐顺序是LVHA，即:link:visited:hover:active。理由如下：

·当鼠标悬停在未访问的链接上时，:link和:hover都会命中，如果:hover在:link

之前声明，那么(:hover)就会被覆盖;

·当鼠标悬停在已访问的连接上时，:visited和:hover都会命中，如果:hover在:visited

之前声明，那么(:hover)就会被覆盖;

·当鼠标单击链接时，:active和:hover都会命中，我们大多是想让:hover只在悬停时展示样式，按下鼠标时使用:active

样式，因此:active在:hover之后声明;

·综上，:hover应在:link和:visited之后，在:active之前，因此active在最后。而:link和

:visited两者的顺序无所谓，互不影响。

5CSS常见的长度单位

CSS中除了px长度单位之外，还有下面几个长度单位：

·pc六分之一英寸，1pc=12pt=1/61in=16px;

·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈133px;

·in一英寸，1in=254cm=96px;

·ex在含有“X”字母的字体中，它是该字体的小写字母的高度。对于很多字体来说，1ex≈05em;

·em1em等于父级元素的字体大小，2em就是父级元素字体大小的二倍;

·rem当用在根元素()的font-size上面时，它代表了它的初始值;

·ch代表元素所用字体font中“0”这一字形的宽度;

·vh1vh相当于视口高度的1%，100vh就是视口的高度;

·vw1vw相当于视口宽度的1%，100vw就是视口的宽度;

·vmax视口高度vw和宽度vh两者中的最小值

·vmin视口高度vw和宽度vh两种中的最大值;

·%相对于父级元素的大小来确定;

参考：CSS[1]

CSSpercentage[2]

6事件对象

冒泡与捕获

事件冒泡与捕获是事件处理的两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

在点击子元素时，浏览器运行了两种不同的阶段：捕获阶段和冒泡阶段。捕获阶段的行为：

·浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它;

·

然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素;

而冒泡与捕获恰恰相反：

·浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它;

·然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素;

而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。因此上面代码在点击子元素时会先执行子元素绑定的事件，然后向上冒泡，触发父元素绑定的事件。

addEventListener函数的第三个参数是个布尔值。含义：

·当布尔值是false时(这也是默认值)，表示向上冒泡触发事件;

·当布尔值是true时，表示向下捕获触发事件;

不能冒泡的事件

有些事件是不会冒泡的。比如：

·blur元素失去焦点时触发，focusout事件也是失去焦点时触发，但可以冒泡;

·focus元素获取焦点时触发;

·mouseenter鼠标移动到元素上时会触发该事件，与之对应的是mouseover事件，但会冒泡;

·mouseleave鼠标离开元素时触发，与之对应的是mouseout，但会冒泡;

事件冒泡可以让我们利用事件委托，尤其是处理大量子元素时，如果给每个子元素都绑定事件，这是不优雅的，可以将事件绑定到父元素上，并让子节点上发生的事件冒泡到父节点上，利用

etarget属性可以获取到当前触发事件的子元素。

事件对象中的方法

·stopPropagation()阻止事件冒泡，当设置后，点击该元素时父元素绑定的事件就不会再触发;

·preventDefault()阻止默认事件的发生;

·stopImmediatePropagation()它用来阻止监听同一事件的其他事件监听器被调用以及阻止事件冒泡，比如给同一个div

元素绑定多个click事件(使用addEventListener方法可以注册多个)，当在第二个事件函数中调用

stopImmediatePropagation方法时，点击div元素时，后面注册的click将不会被触发，而且还会阻止事件冒泡;

比如下面的例子，给p绑定多个click事件，在第二个事件函数中调用stopImmediatePropagation，第三个click

事件就不会触发，因为也阻止了冒泡，因此父元素的click事件也不会触发。

paragraph

documentquerySelector("div")addEventListener("click",(event)=>{


alert("我是div元素,我是p元素的上层元素");


//p元素的click事件没有向上冒泡，该函数不会被执行


},false);


constp=documentquerySelector('p')


paddEventListener("click",(event)=>{


alert("我是p元素上被绑定的第一个监听函数");


},false);


paddEventListener("click",(event)=>{


alert("我是p元素上被绑定的第二个监听函数");


eventstopImmediatePropagation();


//执行stopImmediatePropagation方法，阻止click事件冒泡，并且阻止p元素上绑定的其他click
事件的事件监听函数的执行


},false);


paddEventListener("click",(event)=>{


alert("我是p元素上被绑定的第三个监听函数");


//该监听函数排在上个函数后面，该函数不会被执行


},false);

“

在IE浏览器中，使用ecancelBubble=true也可以取消事件冒泡;使用ereturnValue=false

也能阻止默认事件的发生。

target与currentTarget

target属性指向的是事件目标，而currentTarget属性指向的是正在处理当前事件的对象，它总是指向事件绑定的元素。而target

指向的可能不是定义时的事件目标。

例如：

divaddEventListener('click',(e)=>{

consolelog(etarget,ecurrentTarget);

},false);

etarget可能指向div元素，也可能指向它的子元素。而ecurrentTarget总是指向div元素。

以上就是小编今天为大家分享的关于参加Web前端面试的常见面试题汇总的文章，希望本篇文章能够对正准备参加前端面试的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

参考资料

[1]

CSSlength:#/zh-CN/docs/Web/CSS/length

[2]

CSSpercentage:

#/zh-CN/docs/Web/CSS/percentage

随着时代的发展，很多新兴的就业职位随之产生。前端工程师将就是随着互联网的快速发展而产生的。其实在很多人的观念里，前端工程师也就是一个切页面的而已，他们也就是会html、css、javascript这些没有任何技术含量的网页制作而已。然而随着技术飞速发展，人们对这些技术的要求也是越来越高，如果只凭着一个人来把所有的事情都解决是很困难的，所以这个时候前端工程师就开始发挥着他们很大的作用了。

那我们应该如何来面试前端工程师呢？

首先我们要了解到一般关于工程师的面试都是被分为问答面试和代码面试的。当然也有很多公司会增加一些其他的面试。不过这就主要看公司的情况而来。一般前面一二轮的面试都是主要是技术方面为主。后面几轮就是你的老板要和你聊聊你的待遇和规划的问题了。接下来就让我们来聊聊面试前端工程师的一些技巧吧。

扎实的理论基础

如果你想成为一个优秀的前端工程师你就必须要有一些基础工程师所必需的具有的扎实的理论基础。这些扎实的理论基础是你面试前端工程师的前提。如果你不具备这些理论上的知识想必你连面试的资格都没有。所以想面试成功你就需要掌握这些有关的理论知识。

较强的考察能力

关于这个前端工程师的面试，考察能力时候很重要的。一般呢，我们可以总结为前端工程师是有关基础理论和能力的综合。而这个里面的能力就包含这个考察能力这个考察能力呢一般就是指工程师的编程能力。

一般面试官都是通过案例问题来检验每个人的考察能力的。这个所谓的案例问题就是在编程上的一些算法题。这一般有些小复杂所以就需要你较强的考察能力来配合了。

谈吐要大方得体

在我们在面对面试官时我们千万不要紧张。在进行自我介绍时我们要努力做到自信大方、吐字清晰。我们在自我介绍时要用简明扼要的话语来介绍自己，突出自己的优点表明自己的求职意向。你要通过寥寥数语把自己的优势都向面试官介绍清楚。记住不必要的话语要少说。

好了关于如何面试前端工程师这个话题我就聊到这了。希望我的回答能对你有所帮助。

从前端面试到成功，一般要三个小时左右

如果是我面试，就给应聘者一个开放的项目，可以提供服务器端API或数据服务，限定一周时间，这叫试做。然后，根据评审确定入围的人，再面试。面试可以围绕项目展开，首先让面试者围绕HTML、CSS和JavaScript讲一讲设计思路、实现过程、遇到了什么困难，如何解决的，最终实现方案与设计有什么出入，有什么收获，等等。然后再根据项目中的不足有针对性地提问测试，考察面试者的实际经验和解决问题的能力。解决实际问题的能力最重要。

总之，实际的开发工作不同于考试，考试设计得越接近实际工作需要，结果才可能越真实，才可能真正招到想要的人。

1为什么会形成跨域？

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法：安装插件

Pip install django-cors-headers

2vuex的工作流程？

① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

④ 最后由store触发每一个调用它的组件更新。

3vuex是什么？怎么使用？

vuex是一个专为vuejs应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：https://blogcsdnnet/qq_33226029/article/details/109628600spm=1001201430015502

4vuex中的数据在页面刷新后数据消失怎么解决？

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件

5在vue中，如何阻止事件冒泡和默认行为？

在绑定事件时，在指令后边加上修饰符stop来阻止冒泡，prevent来阻止默认行为

6深拷贝与浅拷贝？

假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。

7vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用

8 keep-alive: 组件缓存

https://juejincn/post/6844903624099758094

routerjs中:

meta: {keepAlive:true} // 需要被缓存

钩子执行顺序：created -> mounted -> actived

include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。

应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。

9vue传值方式？

props $emit() $on() $parent $children $listener $attr

10 $on 兄弟组件传值

$emit 分发

$on 监听

$off 取消监听

$once 一次性监听一个事件

在js文件中定义一个中央事件总线Bus，并暴露出来

具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。

应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录

11组件跨级传值

$attrs a->b->c

$listeners 监听

12vue事件修饰符有哪些？

stop prevent self once passive sync

13箭头函数中的this？

不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

15为什么vue组件中data必须是一个函数？

如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16v-if 和 v-show区别？

v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；

v-if 是惰性的；v-show 做的仅是简单的css切换。

17v-text 与 v-html区别？

v-text 用于普通文本，不能解析html；

v-html 反之。

18v-for key的作用？

使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。

key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19Scss是什么？在vue-cli中安装步骤？有哪几大特性？

npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加scss拓展） Vscode中可在扩展中下载;

特性：可以用变量，可以用混合器，可以嵌套等。

20vue获取dom？

ref

21vue初始化页面闪动问题？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23vue路由传参，接收？

传： this$routerpush({path:'', query(params):{}})

接：this$routerqueryxxx

24防抖和节流？

节流是一定时间内执行一次函数，多用在scroll事件上；

防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25如何让scss只在当前组件中起作用？

web前端面试会问人事方面的内容和web前端技术的内容；

人事的面试

web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；

web前端技术的面试

技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；

对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。

我给你截图看一下例子吧